Hi hi,
I’m new to shopify and I would like to change the button color of the variant picker but I really don’t know how 
Can somebody help me?
It’s black now and I want to change it to the following color: #eae0D3
Thank you in advance for the help.
Love,
Myl
@myl1 - can you please share the page link where you have this variant picker?
https://atelierpommenl.myshopify.com/products/easy-sweat-feelin-grey?variant=44720002334874
It’s white when you see it, but when you click it it turns black.
@myl1 - password to view page?
Hi @myl1
Would you mind to share your store URL? with password if its protected. Thanks!
password: beofla
Thanks for the info, 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:not(.color__swatch)::after {
background-color:#eae0D3 !important;
}
And Save.
If you like to change the text color into black add this code.
.product-form__input input[type=radio]:checked + label:not(.color__swatch) {
color: black !important;
}
And Save.
Rersult:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
@myl1 please add this css to the very end of your base.css file and check
.product-form__input input[type=radio]+label{color: #000 !important;}
.product-form__input input[type=radio]:checked+label:not(.color__swatch){
box-shadow: inset 0 0 0 .2rem #eae0D3 !important;}
.product-form__input input[type=radio]:checked+label:not(.color__swatch):after {
background-color: #eae0D3 !important; color: #000 !important;}
Hi hi, thank you. It’s not working unfortunately
Hi hi, thank you for your response. Unfortunately it’s not working..
@myl1 - I can not see the code added
It’s added
Try to add in the Custom Css under the Customize Theme.
From you customise theme change product on this side.
Go to prodcut page > and click the product information at the left
Then there will be visible tab on the right.
Paste it here.
.product__info-wrapper .product-form__input input[type=radio]:checked + label:not(.color__swatch)::after {
background-color:#eae0D3 !important;
}
.product__info-wrapper .product-form__input input[type=radio]:checked + label:not(.color__swatch) {
color: black !important;
}
And Save.
Make sure you refresh the browser.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
@myl1 - on line 3599 , please add closing bracket } , it will complete the bracket parenthesis for keyframes above and this newly added css will work
thank you! It works in the preview of the customise theme but not on the ‘live’ website. How can I fix that?
Your not live yet, that why you set password protected right? And did you add the code on the theme that your going to use for live?
Yes that’s right! It’s only in the backoffice of the customise theme now. So what should I do?
That is set, what you see in the customize theme should be same on the live or preview. And it because your not live yet so you can only see the preview at the moment.
Okay, so as soon as we go live tomorrow without password it will be fixed?