What's your biggest current challenge? Have your say in Community Polls along the right column.

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

Solved

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

namestolen
Excursionist
44 0 7

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:

 

View Cart Check out.jpg

 

Thanks in advance!

Accepted Solution (1)

Spac-es
Shopify Partner
401 118 152

This is an accepted solution.

Add this code in your base.css file:

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

Before VS After:

1.PNG   2.PNG

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

Replies 3 (3)

rajweb
Shopify Partner
436 41 71

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

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com
namestolen
Excursionist
44 0 7

Sorry, this did not work.

Spac-es
Shopify Partner
401 118 152

This is an accepted solution.

Add this code in your base.css file:

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

Before VS After:

1.PNG   2.PNG

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!