How can I alter the color of a variant pill on my site?

[basicbastardco]

Hey guys, how can I change the colour of this variant pill (Size and color)? 

URL https://basicbastard.co/

[Sho2guru]

Hello,

can you provide your store details so i can help you with that?

[PageFly-Victor]

Hi @basicbastardco !

This is PageFly - Advanced Page Builder. I would love to give you some recommendation.

And please paste this code at the bottom of section-main-product.css under assets in theme code files;

fieldset.product-form__input .form__label {
margin-bottom: 0.2rem;
color: coral !important;
}

You can change color as you want.

Best Regards;

Pagefly

[made4Uo · Accepted solution]

Hi @basicbastardco,

If you are trying to change the background of the variant pills, see image below. You can follow the instructions here.

1. From your Admin store, go to Online store > Themes > Click Actions > Edit code
2. Open the Asset folder, and find the base.css file. 
3. Add the code below.

NOTE: You can change color blue

.js.product-form__input input[type=radio]:checked+label {
    background-color: blue;
}

[thetrinketclub]

 Very helpful thank you 🙂 

[GPCS]

Hello, @made4Uo . 

I was wondering how I can do this for all the variant pills because it only worked on 1 variant pill so far. Please see the screenshot below for reference. Thank you!

[vera_p]

Hi! 

This helped me a lot in changing the variant colors as well.

With this, I could also change the border of the variant pill button.

How can I change the label color? What is the code?

I have tried but somehow it does not work 🙂 

webkit-text-fill-color: #FFFFFF;

Thanks!

[protofab4x4]

Thank you this was perfect! Is it possible to change the text color on the highlighted variant pill as well?