Hi, I was just wondering how I could change the colours of these buttons to their respective colour? (So the button for red being red and the colour for blue being blue). Thank you!
Topic summary
A user seeks to change product variant buttons (e.g., red, blue) to match their respective colors on a Shopify product page.
Proposed Solutions:
- Assign unique CSS classes to each button variant and apply corresponding background colors in the stylesheet
- Modify the product template file (main-product.liquid, product.liquid, or product-template.liquid) by adding conditional logic to assign custom classes based on variant names
- Example implementation: Use
{% if value == 'Red' %}conditions to add classes like “custom-red”, then style with CSS like.custom-red { background-color: red; color: #fff; }
Current Status:
- One responder successfully implemented the solution on the provided store URL (poochplaytoys.com) and shared a screenshot as proof
- The original poster is having difficulty locating the button code in their product-template.liquid file and has requested additional guidance
Technical Details:
- Solution involves finding variant button code (typically
<input type="radio">or<label>tags) and adding conditional class assignments based on variant text values
Hello @LloydBasti
Its Artzen Technologies! We will be happy to help you today.
You can change the color of the buttons on product page by giving each button a unique but different class. And in CSS file give different background color to each button. It is little more time consuming process but it is the solution to your problem. For example:-
For button red:-
.red{
background color: red;
}
For button blue:-
.blue{
background color: blue;
}
If this solution helped you then please mark it as accepted.
Let me know if need further assistance
Regards,
Artzen Technologies
Hello @LloydBasti
Could you please provide your store URL and, if it is password protected, please share the password so I can review it and provide a solution.
Hi @LloydBasti
Yes, you can change the color of the product variant option button as you like. for that you have to write few lines of code in your main-product.liquid or product.liquid or product-template.liquid or whatever name that product page code written.
Now you have to find variant button code by searching or whatever tag is using in your theme. in my case the code is like below -
in this code {{ value }} means, variant button text like Red, Blue etc…
So now we will add custom class for custom color or styling for that you have to add custom class in tag like below code -
Now you have to write CSS code in your style.css or whatever CSS file you have, just copy and paste below code -
.custom-red{
background-color: red;
color: #fff;
}
.custom-blue{
background-color: blue;
color: #fff;
}
.custom-green{
background-color: green;
color: #fff;
}
you can put the condition for different colors like below code -
{% if value == 'Red' %}
{% endif %}
{% if value == 'Blue' %}
{% endif %}
{% if value == 'Green' %}
{% endif %}
just you have to change the text of button, class name and CSS code for specific color. That’s it!
I hope it will work!
I have implemented the changes on your provided link to check code and it is working. you can see the screenshot below -
Hi Sandy, I’m having trouble locating the code for the buttons on the product-template.liquid page. Do you have any further advice in locating this? Thank you!