How can I change the color of my variant picker in Be Yours theme?

[myl1]

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

[suyash1]

@myl1 - can you please share the page link where you have this variant picker?

[myl1]

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. 

[suyash1]

@myl1 - password to view page?

[myl1]

password: beofla

[suyash1]

@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;}

[myl1]

Hi hi, thank you. It's not working unfortunately

[suyash1]

@myl1 - I can not see the code added

[myl1]

It's added

[suyash1]

@myl1 - on line 3599 , please add closing bracket } , it will complete the bracket parenthesis for keyframes above and this newly added css will work

[Made4uo-Ribe]

Hi @myl1 

Would you mind to share your store URL? with password if its protected. Thanks!

[myl1]

https://atelierpommenl.myshopify.com/products/easy-sweat-feelin-grey?variant=44720002334874 

Password: beofla

[Made4uo-Ribe]

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]

Hi hi, thank you for your response. Unfortunately it's not working.. 

[Made4uo-Ribe]

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]

thank you! It works in the preview of the customise theme but not on the 'live' website. How can I fix that? 

[Made4uo-Ribe]

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? 

[myl1]

Yes that's right! It's only in the backoffice of the customise theme now. So what should I do?

[Made4uo-Ribe]

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. 

[myl1]

Okay, so as soon as we go live tomorrow without password it will be fixed?

[Made4uo-Ribe · Accepted solution]

Yes, Should be. Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[myl1]

I will do that! thank you so much!