Change the colour of the shopping cart pop-up

Store Design

Topic summary

A user is trying to change the background color of their shopping cart pop-up notification, which currently doesn’t match their website’s color scheme. Theme settings adjustments haven’t affected the pop-up’s appearance.

Solutions provided:

Three community members offered CSS-based solutions:

  • Custom CSS injection: Add styling code to theme.liquid file (before </body> or </head> tag) or directly to theme.css/base.css
  • Target element: Use CSS selector div#cart-notification.cart-notification with background property and !important flag
  • Example color: Solutions demonstrated using darkslategrey as the new background color

All solutions involve editing theme code files in the Shopify admin (Online Store → Theme → Edit code). Screenshots show successful color changes to the cart notification pop-up.

One developer also suggested using the EasyEdits app as a no-code alternative, which offers a visual editor for color changes and allows keeping edits after the free trial.

Status: Multiple working solutions provided; awaiting user confirmation of which approach they’ll implement.

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

I made changes in the theme settings of the website, but the settings (colour) of the pop-up did not change:

EdensBakehouse_0-1735824457313.png
EdensBakehouse_0-1735824457313.png590×796 20.4 KB

I would like to apply some changes to it which do not effect the rest of the website.
The colour of the pop-up is not the same as the background of the website, very confusing.

EdensBakehouse_1-1735824551910.png
EdensBakehouse_1-1735824551910.png1862×1338 207 KB

2 Likes
2

share ur website

3

Hey @EdensBakehouse

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1735825105638.png
Moeed_0-1735825105638.png1559×879 159 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

4

Hi @EdensBakehouse

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
div#cart-notification.cart-notification {
    background: darkslategrey !important;
}

Result:

websensepro_0-1735826313484.png
websensepro_0-1735826313484.png807×500 172 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

5
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before and press ‘Save’ to save it
  • This is the result you will get:

BSSTekLabs_0-1735835524733.png
BSSTekLabs_0-1735835524733.png1591×813 197 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
6

Looks like you already have replies showing code you can add, so I won’t put more out there. I just wanted to give you the option of EasyEdits. You can just click and change the color with the editor. You can use it for free on the trial and keep the edits without paying. I am the dev behind it, do feel free to ask any questions. Best of luck, and let me know if I can help out at in any way!