Popup checkout color button - Dawn theme

Store Design
1

How can I change the background color of the Checkout button that shows up after I click on ATC. There’s a notification popup with two buttons

emotiv.ro

2

If I could change just one thing about Shopify tomorrow, it would be more granular discount controls built directly into the native Discounts dashboard — no extra apps required.

Right now, most merchants I work with struggle when they want to:

  • Exclude certain collections or product types from a site-wide discount,

  • Prevent stacking of automatic discounts with manual discount codes,

  • Or run “Buy X Get Y” promos only on selected variants.

Being able to do all of that in one place — with a simple toggle for “exclude sale items,” “exclude specific tags/collections,” etc. — would save hours of setup and reduce conflicts with third-party apps.

It would also help developers because we wouldn’t need so many custom scripts or hidden metafields just to get discounts behaving properly.

What about you? If you could wave a magic wand over Shopify, what would you fix first?

3

You can add the code like this to your “Theme settings”=> “Custom CSS”, or in your stylesheet, like assets/base.css – color values must be in R, G, B format

#cart-notification-form .button {
  --color-button-text: 200,200,20;
  --color-button: 120,120,120;
}
4

Hi @danny0103

  1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
  2. In the Assets folder, open base.css and add your CSS code at the end
button[name="checkout"] {
  background: #f5bfa5 !important;
  color: #000 !important;
}
button[name="checkout"] font {
  color: #000 !important;
}

image
image1279×601 68.5 KB

5

Hi @danny0103,

Please go to Customize > Theme settings > Custom CSS and add code:

#cart-notification-form .button {
    background: #f5bfa5 !important;
    color: #000000 !important;
}

If I helped you, then a Like would be truly appreciated.

6

Hi @danny0103,

  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.
button[name="checkout"] {
    background-color: #F5BFA5 !important;
    color: black !important;
}

Thanks!

7

thanks a lot. works like a charm

8

Hi @danny0103

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful, please like all posts. :white_check_mark: