How to change the color of the variant button?

Store Design
, , ,

Topic summary

A user needed help changing the color of variant buttons on their Shopify product pages. After sharing a screenshot showing the default button appearance, they received assistance from multiple community members.

Solution provided:

  • Add custom CSS code to the theme.liquid file, placed above the </body> tag
  • The code targets specific product templates using template numbers to style variant buttons
  • Initial attempt failed due to a formatting issue with style tags
  • After removing an extra style tag, the solution successfully changed the button color

Follow-up question:
The user noticed the changes only apply to the specific product and asked whether they can reuse the same code for other products by simply changing the template number in the CSS. This question about scaling the customization across multiple products remains unanswered.

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

Screenshot (358).png
Screenshot (358).png925×548 32.4 KB

1 Like
2

hey @Jim3 share the URLs of your website plz

3

Hi @Jim3
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

4

Hey @Jim3

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

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

RESULT:

Moeed_0-1744614727906.png
Moeed_0-1744614727906.png543×820 38 KB

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
5

Hi, @Moeed

It didnt work this time.

Screenshot (361).png
Screenshot (361).png1920×1080 290 KB

6

Mustafa_Ali_0-1744628418467.png
Mustafa_Ali_0-1744628418467.png332×159 20.1 KB

just removed the one style tag and then saved it

1 Like
7

It worked! Thank you :slightly_smiling_face:

@Mustafa_Ali In future I will make this kind of thing for next products, but I see that when I list them they are not showing with this changes. It seems that for every product I should add a different code to change the variant button color. I noticed that in the code there is a template number, if I use the same code and just change the template number with this on the new product, am I going to create this new changes for the new porduct? Thank you :slightly_smiling_face: