Dawn Theme - Changing Color of Add to Cart Button (May 9th, 2022)

Store Design
1

Using Dawn Theme

I used to be able to change the color of the Add to Cart button on the product page by using this in Assets, theme.scss.liquid:

button#AddToCart–product-template {

Color: #FFFFFF;

background-color: #58b42d;

font-weight: bolder;

}

however, the theme.scss.liquid is no longer there

When going to edit my code, I found this notice and I have a hunch that it has something to do with the change:

Screen Shot 2022-05-09 at 5.47.14 PM.png
Screen Shot 2022-05-09 at 5.47.14 PM.png2010×816 197 KB

But this is above my level of understanding

Looking for a way to change the color of the Add to Cart button in the Dawn theme

Any help is much appreciated!

2

Hi @ginamenduni ,

The main css file in Dawn in base.css under the Asset folder but the code that you have would not work. You can use this code below and paste it inside the base.css under Asset folder.

product-form [type="submit"] {
    color: #FFFFFF !important;
    background-color: #58b42d !important;
    font-weight: bolder !important;
  }
4 Likes
3

@ginamenduni

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

5

Thank you - this worked! Appreciate your quick help :+1:

6

Thank you man! @made4Uo Here worked properly!

Its possible include these other buttons on the same CSS?

7

I am looking to do the same thing but having issues with v8.0.0 of the dawn theme not able to change the add to cart button to black button and white text

1 Like
8

Sorry newbie here. Where in the base.css do you actually paste the code?

9

Hi @blsurf89

  1. From your Admin page, go to Online store > Themes > click the three dots > Edit code

  2. Under the Asset folder, find the base.css

  3. Make sure to paste the code at the very bottom of the file

10

worked for me! thanks so much!