How can I change the color of my add to cart button?

Store Design
1

Hi, I’ve tried to change the color of my add to cart button using solutions shared in other discussions but it never worked. I’m using a custom theme. Can someone take a look at my website and tell me what code I should use?

1 Like
2

@maurant

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

1 Like
3

my site url is: www.dogstrom.co

Similar theme to Venture theme

1 Like
4

@maurant

Thanks for it

do you like this

KetanKumar_0-1610217141788.png
KetanKumar_0-1610217141788.png1920×1080 301 KB

can you please share product section code so i will update code

1 Like
5

Basically, I’d like you to swap the colors of the “Add to Cart” and the “Buy it now” button. Add to cart: #0AA9BD (button color) with white (text color). Buy it now: white (button color) with #0AA9BD (text color).

How do I access the product section code once I get to theme >> edit code?

Thanks for assisting me!

1 Like
6

@maurant

Thanks for clear this

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
button#AddToCart-product-template {
    background: #0AA9BD;
    color: #fff;
}
.shopify-payment-button__button {
    background: transparent !important;
    color: #0AA9BD !important;
    border-color: #0AA9BD !important;
}
.shopify-payment-button__button:hover {
    color: #fff !important;
}
1 Like
7

Amazing! This worked perfectly. However, the featured product on the home page still has the transparent ATC button…how do I change that color to match the other ATC buttons?

1 Like
8

@maurant

yes, please

.product-form__cart-submit {
    background: #0AA9BD !important;
    color: #fff !important;
}
1 Like
9

Amazing! This guy is an expert in shopify web development & coding. Appreciate your time :slightly_smiling_face:

1 Like
10

@maurant

Thanks for your compliment and support.

11

hi, i’d like to know how can you help me change the background color of the add to cart button on the product page? It’s only a pure line box now.

https://ohcharm.com/products/curtain-tiebacks

color code is: #000c69

Thank you

1 Like
12

@Fnoces

i can see this

KetanKumar_0-1611466037058.png
KetanKumar_0-1611466037058.png1920×1080 263 KB

13

Any change you could take a look at mine as well, I can’t find a solution to change the button color?