How to change "Add To Cart" button color

Solved
Highlighted
New Member
7 0 0

I'm using Supply Theme and the add to cart button is black.  How can I change the color?

0 Likes
Highlighted
Shopify Expert
667 170 233

This is an accepted solution.

Hi, @J8hn ,

This is Evita from On The Map.

 

Do you mean add to cart button in product details?

You can try adding this code:

 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

 

.btn--add-to-cart {
    background: gold;
    border: none;
    color: white;
}

You can play with colors as you like.

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
Highlighted
New Member
4 0 0

Hey there,

 

I am currently having the same issue, where i can not change the color of the "add to cart" button in the product details page. I have tried this solution and a variety of others that i have come across. But nothing has worked. Any suggestions?

 

Best,

 

Design Oddball

0 Likes
Highlighted
Shopify Partner
723 107 278

@designoddball What's the URL of your website so we can see the CSS?

If helpful then please Like and Accept Solution
0 Likes
New Member
4 0 0
Highlighted
New Member
4 0 0

Forgot to ask if there is a way to change the text and border colors of the "add to cart" button as well?

0 Likes
Highlighted
Shopify Partner
723 107 278

OK try changing the CSS you've added to this:

 

.btn--add-to-cart {
    background: gold !important;
    border: none !important;
    color: white !important;
}
If helpful then please Like and Accept Solution
Highlighted
New Member
4 0 0

Jon

 

It appears to have worked.

 

Thank you

DO

0 Likes
Highlighted
Shopify Partner
723 107 278
No problem.
Did you work out how to get the borders the way you want or are you happy without any?
If helpful then please Like and Accept Solution
0 Likes
Highlighted
Excursionist
36 2 3
The best way to change colors of any element such as the add to cart button, is to inspect the element. I recommend watching a video on dev tools. Chrome is my favorite one to use. On the right there are css styles. You’ll find something like background color: red; change it to what ever you’d like.
0 Likes