How to change "Add To Cart" button color

[J8hn]

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

[OTM · 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

[designoddball]

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

[JonWright]

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

[designoddball]

The URL is -  https://designoddball.com/products/tune-out

[designoddball]

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

[JonWright]

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

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

[designoddball]

Jon

It appears to have worked.

Thank you

DO

[JonWright]

No problem.
Did you work out how to get the borders the way you want or are you happy without any?

[mitchell5848]

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.

[Theholydressing]

Thanks Évita . It worked for me 🙂

[ShopZoeyGrace]

@JonWright I am having the same issue and tried everything here. I am on the broadcast theme and the add to cart botton is invisible until you hover over it. I would prefer for it to be a black button.

I tried all the recommendations and they are not working for me. 

This message is in the theme SCSS liquid.

*============================================================================
Broadcast | Built with Slate
- You cannot use native CSS/Sass @imports in this file without a build script

Here a link to preview the product page and "hidden" add to cart and Apple Pay buttons. 

https://shopzoeygrace.com/collections/zoey-grace-tees-tanks/products/faithful?variant=35675912568991

Thank you in advance for your help!

[JonWright]

@ShopZoeyGrace from looking at your site it seems you've solved this one.