How can I change button colors on my product page?

[kee2743]

Hi,

I’m running into trouble trying to change the background of the “color” variations, “quantity”, and “add to cart” on my product page.

Can anyone provide advice on how to change it? Here’s my site: https://tryhellocomfort.com/products/self-defense-keychain-alarm-rechargeable-personal-alarm

Thanks!

[David_SHT]

Hi @kee2743 ,

This is David at SalesHunterThemes.

Thank you for your question.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → theme.liquid file.

Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

[PageFly-Noah]

Hi @kee2743

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Noah | PageFly

[PaulNewton]

Hi @kee2743 to maintain theme upgradability before editing theme code, try the solutions first in a custom-css setting or a custom-liquid block.

For the custom-css block you do not need the surrounding html tags only the internal CSS code.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

[ZestardTech]

Hello @kee2743

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.product-form__input input[type=radio]+label {
color: #fff !important;
}
.quantity,
.quantity .quantity__button,
.product-form__submit{
color: #fff !important;
}

[kee2743]

Thanks! It’s almost corrected with the code you provided. However, it stilll leaves the color variations with a blue background. Do you know how to fix the background of the color variations?

https://tryhellocomfort.com/products/self-defense-keychain-alarm-rechargeable-personal-alarm

[PageFly-Noah]

Hi @kee2743 , Please help me to replace the code above with this new one