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

Store Design
, ,

Topic summary

A user seeks to customize the “Added to cart” popup in Dawn theme by changing its background color and adding a border to make it stand out better against their website’s backdrop.

Initial Solution Attempt:

  • One responder suggested adding CSS to theme.scss.liquid or theme.css file targeting .cart-popup class
  • Included properties for background-color, border, border-radius, and padding
  • This solution did not work for the original poster

Working Solution:

  • Another user provided CSS targeting div#cart-notification specifically
  • Code to add in base.css file:
    • background-color: black;
    • border: 1px solid white;
  • Before/after images were shared showing the successful implementation

The key difference appears to be using the correct selector (#cart-notification) rather than .cart-popup for Dawn theme’s cart notification element.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
2

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