Change Add-to-cart button color on Viola Theme

Store Design
, ,

Topic summary

A Shopify store owner using the Viola theme wants to change the add-to-cart button color without affecting the Accent 1 background color used elsewhere.

Solution provided through custom CSS:

  • Product page button: Target .product__info-container .product-form__buttons .button--primary with desired background color
  • Homepage and collection page buttons: Use selectors for .button, .shopify_challenge__button, .customer_button, etc.
  • Mobile cart icon: Apply color change within @media (max-width: 991px) targeting .product-form.cartmobile

Additional issues resolved:

  • Newsletter subscribe button was unintentionally changed to red; reverted using separate CSS for desktop and mobile targeting .newsletter-form__field-wrapper button
  • Black outline appeared on red add-to-cart buttons; removed using .product__info-container.product-form_buttons.button--primary::after { display: none !important; }

All customizations were successfully implemented through the Theme > Customize > Custom CSS section. The discussion reached full resolution with the store owner confirming everything works as intended.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

We would like to change only the add-to-cart button color without changing the Accent 1 background color. Any help is appreciated.

2

Hi @fukuyafoods ,

Can you send me the page link that contains that button that you want to change please?

Thank you

3

Hi Liz,

Thank you for your reply.

https://fukuya.ca/products/syukaen-shine-muscat-grapes?variant=46025777250563

This is the product page we want to change the color of the add to cart button. Also on the home page as well.

https://fukuya.ca/

Thanks

4

Hi @fukuyafoods ,

  1. You can follow the instruction here to change your button color in Product page:

  • Go to Shopify > Theme > Customize > open Custom CSS

  • Copy and paste this code to the section > Save. You can change the color code as the color you want.

.product__info-container .product-form__buttons .button--primary {
    background-color: #678889;
    box-shadow: none;
}
  1. To change the button on Homepage, you can copy this code and paste to the Custom CSS section as well:
.button, .shopify-challenge__button, .customer button, .wbproducttab .spr-container .spr-summary-actions-newreview {
    background-color: #678889;
}

I hope it helps.

5

Hi Liz,

Thank you for your help. I’ve changed the color of the Add to cart button on the product page.

Is there a way to also change the color of add to cart botton (or icon on mobile) on my home page and collection main page as well?

https://fukuya.ca/collections/bluefin-tuna

www.fukuya.ca

Thanks.

6

Hi @fukuyafoods ,

To change the Add to cart button on Collection page, you can add this code on Custom CSS section:

.button, .shopify-challenge__button, .customer button, .wbproducttab .spr-container .spr-summary-actions-newreview {
    background-color: #823c3c;
}
1 Like
7

Hi Liz,

Thank you so much again for your help. Just one last thing how do I change just the add to cart icon on mobile? Its showing the original color. Thanks.

8

Hi again,

You can add the code to Custom CSS section to change the color of icon on mobile:

@media (max-width: 991px) {
    .product-form .cartmobile {
        background-color: #df2c21;
    }
}
1 Like
9

Thank you so much for your help! :blush:

1 Like
10

Hi Liz,

I noticed the “subscribe” to news letter button on home page is also changed into red. Can we reverse it to original?

Also, there’s a black outline to all the red add to car buttons. Is it possible to remove it or change it to the same red color that we currently have?

Much appreciate for all your help.

11

Hi @fukuyafoods

You can change the color of subscribe button by adding these codes to Custom CSS section. You can change it to the color that you want.

  • For Desktop:
@media (min-width: 992px) {
    .newsletter-form__field-wrapper .button {      
        background-color: #ffff;
    }
}
  • For Mobile:
@media (max-width: 767px) {
    .newsletter-form__field-wrapper .button {
        background-color: #ffff;
    }
}
1 Like
12

Hi Liz,

Thank you for your prompt reply.

Also, there’s a black outline to all the red add to cart buttons. Is it possible to remove it or change it to the same red color that we currently have?

Thanks

13

Hi @fukuyafoods ,

So sorry for the late reply. You can use this code to remove the outline of the Add to cart button.

.product_info-container .product-form_buttons .button--primary::after {
    display: none !important;
}
1 Like
14

Hi Liz,

It works! Thank you so much!