Change Add-to-cart button color on Viola Theme

[fukuyafoods]

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

[LizHoang]

Hi @fukuyafoods, 

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

Thank you

[fukuyafoods]

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

[LizHoang]

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;
}

2. 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. 

[fukuyafoods]

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.

[LizHoang]

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;
}

[fukuyafoods]

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.

[LizHoang · Accepted solution]

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;
    }
}

[fukuyafoods]

Thank you so much for your help! 😊

[fukuyafoods]

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.

[LizHoang]

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;
    }
}

[fukuyafoods]

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

[LizHoang]

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;
}

[fukuyafoods]

Hi Liz,

It works!  Thank you so much!