Hello, I want to change variant picker colors through code to fit my website. How can I do this? As you can see sale badge is green, I want to do the same with variant pickers.
1 Like
Hey @NikoKatamadze
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
2 Likes
I apologize for not clarifying. Yes, it works as I described how I wanted it to work in the beginning, but I forgot to clarify some details. Could you please make it so that when variant is not picked it appears white and has a text color just like “Add to cart” button, but when you select it it becomes green and text color just stays the same.
Check this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.product-form__input input[type=radio]:checked+label {
background-color: #edffa7 !important;
color: black !important;
}
- And Save.
- Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
3 Likes
Thank you.
it works for me! thanks!
One more thing, the colour is changed but doesn’t work in cell phone version. ( still black if use cell phone to check the web)
do you have the idea for that?
thanks!!
Hello @JYW
Good to hear, the code should be work for both screen mobile and desktop. But if there is a code preventing from doing it then it would not be shown. Would you mind to share your store URL? Thanks!