[Dawn Theme] How do I change background color and add a border to Added to cart popup?

[namestolen]

When I add a product to cart there is a popup in the upper right corner.  I want to change the background color and add a border to it so it doesn't blend in so much to the backdrop of my website.  Image for reference:

Thanks in advance!

[rajweb]

Hi @namestolen ,

To adjust the background color and add a border to this cart popup on your Shopify store, you can add custom CSS to the theme.

Follow these steps:

1. Online Store > Themes > Edit Code 

2. Find the theme.scss.liquid or theme.css file (depending on your theme setup).

3. Add the following CSS at the bottom of the file:

/* Style for the cart popup */
.cart-popup {
    background-color: #333333; /* Adjust the color to your preference */
    border: 2px solid #FFD700; /* Change the border color and width as needed */
    border-radius: 8px; /* Optional: add rounded corners */
    padding: 10px; /* Adjust padding for spacing */
}

/* Adjust font color inside the popup */
.cart-popup * {
    color: #FFFFFF; /* Choose a color that stands out against the background */
}

Replace #333333 with the background color you prefer and #FFD700 with your desired border color. Adjust the padding and border-radiusvalues if you want more spacing or rounded corners.

This code targets the popup and applies a new background and border, making it stand out from the rest of your website. Let me know if you need further customization!

If I was able to help you, please don't forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

[namestolen]

Sorry, this did not work.

[Spac-es · Accepted solution]

Add this code in your base.css file:

div#cart-notification {
  background-color: black;
  border: 1px solid white;
}

Before VS After: