Want to change color of add to cart and buy now button on product page in debut theme.

Store Design
1

I want to change the colour of the background and content of both button.

URL: https://greendeerkids.myshopify.com/

ps. green

001-ndeerkids-myshopify-products-copy-of-baby-a-suit-2022-02-26-18_58_16.png
001-ndeerkids-myshopify-products-copy-of-baby-a-suit-2022-02-26-18_58_16.png560×1434 220 KB

2

You should be able to by going to the following in your theme editor;

  1. Theme Settings (Bottom left)

  2. Colors

  3. Change the “Primary” and “Secondary” Button colors

If you want them to be a different color on only the product page, you’ll have to edit the product page template in the “edit code” section.

Hope that helps

3

Hi @Avantika01 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
.product-form__cart-submit, 
.shopify-payment-button .shopify-payment-button__button--unbranded {
    background: black !important;
    color: white !important;
    border-color: black !Important;
}

NOTE: Value black and White, you can change to fit your theme

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

4

What if I want to color both tab differently. Means top one different color, and bottom different.

5

Hi @Avantika01

you need to split into css for 2 buttons as follows:

.product-form__cart-submit {
    background: black !important;
    color: white !important;
    border-color: black !Important;
}

.shopify-payment-button .shopify-payment-button__button--unbranded {
    background: black !important;
    color: white !important;
    border-color: black !Important;
}

hope it can help you