Solved

How to change "Add To Cart" button color

J8hn
New Member
7 0 0

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

Accepted Solution (1)

OTM
Shopify Expert
696 170 252

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!

View solution in original post

Replies 18 (18)

OTM
Shopify Expert
696 170 252

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!
designoddball
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

JonWright
Shopify Partner
818 123 361

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

If helpful then please Like and Accept Solution

Owner of Neuralcandy Shopify Agency
designoddball
New Member
4 0 0
designoddball
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?

JonWright
Shopify Partner
818 123 361

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

Owner of Neuralcandy Shopify Agency
designoddball
New Member
4 0 0

Jon

 

It appears to have worked.

 

Thank you

DO

JonWright
Shopify Partner
818 123 361
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

Owner of Neuralcandy Shopify Agency
mitchell5848
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.
ShopZoeyGrace
Visitor
1 0 0

@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
Shopify Partner
818 123 361

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

If helpful then please Like and Accept Solution

Owner of Neuralcandy Shopify Agency
Theholydressing
Visitor
1 0 0

Thanks Évita . It worked for me 🙂

SebThuot098
Visitor
1 0 0

I've taken over the admin for this site (https://www.verygoodbutchers.com/) and I am trying to figure out how to change the "add to cart" button's color. I cannot seem to find the theme.scss folder. Is it possible it was replaced or removed? How can I change the color if this folder is not present? 

redhairedlass
Visitor
1 0 0

Disregard

olivia_tcc
Visitor
2 0 0

Hi, I've been trying to follow these steps but all my checkout buttons (and all buttons generally) are completely black. I'm on the "Dawn" theme. 

After following your steps above, there is no theme.scss file in the assets folder of the edit code on the theme.

my site is https://www.theclearlycollective.com/products/the-gtown-scarf

Thanks!

olivia_tcc
Visitor
2 0 0

Disregard. Accent color was not clearly labeled until dug through inspect element.

Bilal22
Visitor
1 0 0

I have the same problem, i tried everything:
https://koreanglow.nl/products/beauty-of-joseon-ginseng-essence-water

Would you be so kind to help me?
I want the text and border line to be black 

speedersinc
Visitor
3 0 0

Hi,

i amlooking to change the Add to cart button color on my collections page. I use debutify theme.