Changing the colour of the variant picker

[1edenlegacy]

Hello Shopify Community,

I am requesting help with changing the color of my variant picker options. Currently on this page --> www.1edenlegacy.com/products/eternal-love-warriors-grace-necklace the variant picker buttons have a dark blue overlay when being selected, which is making the black text impossible to read. I need help with changing the color of the selected option so that the text is still readable! I am using the theme Dawn 11.0.0 ! Thank you in advance

[Made4uo-Ribe]

Hi @1edenlegacy 

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 {
    color: white !important;
}

• And Save. 
• Result:
• 

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

[Francesco051199]

Hello!

How can I change the black background of the variant picker with the following color (#604F5B)?

I would like the variant picker's background color to be the same of the "Add to cart" one.

Waiting for a reply, best regards.

[Made4uo-Ribe]

Hi @Francesco051199 

PLease, share your store URL. Thanks!

[Francesco051199]

evenskin.store

[Made4uo-Ribe]

thanks for the info, but seems like you already using the bundle variants app. 

[Francesco051199]

I will delete the bundle so I will need to know how to change the variant picker color.

[Made4uo-Ribe]

While your doing that try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. 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--pill input[type=radio]:checked+label {
    background: #604F5B;
}
.product-form__input--pill input[type=radio]+label {
    border-color:#604F5B;
}

• And Save.
• Result:
• 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[Francesco051199]

Thank you so much!

[Made4uo-Ribe]

Welcome! Would you mind giving more likes since you can't mark solution? It would be a big help for me. Thanks!

[Francesco051199]

I don't know how to mark the solution, please teach me!