how can i change the color of variant background

[Martin299]

how can i change the color of variant background 
thanks in advance

[Rahul_dhiman · Accepted solution]

Hello @Martin299 
Go to online store ----> themes ----> actions ----> edit code ---->assets ----> component-product-varient-picker.css
add this code at the end of the file.

.product-form__input--pill input[type=radio]:checked+label {
background-color: #ffcc33;
color: #000;
}

result

Thanks

[topnewyork]

Hi @Martin299 , 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
.product-form__input--pill input[type=radio]:checked+label {
    background: #ffc520 !important;
    border: unset !important;
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[Martin299]

it works, 
how can i change the text color to black in variant 

[topnewyork]

I am giving you the fix just give me a few minutes. 

[topnewyork · Accepted solution]

@Martin299 , replace the old code with this:

<style>
.product-form__input--pill input[type=radio]:checked+label {
    border: unset;
    background-color: #f6b600;
    color: black ! important;
}
</style>

[Moeed]

Hey @Martin299 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product-form__input--pill input[type=radio]:checked+label {
    background: #FFCC33 !important;
    border: unset !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Rahul_dhiman · Accepted solution]

Hello @Martin299 
Go to online store ----> themes ----> actions ----> edit code ---->assets ----> component-product-varient-picker.css
add this code at the end of the file.

.product-form__input--pill input[type=radio]:checked+label {
background-color: #ffcc33;
color: #000;
}

result

Thanks

[Rahul_dhiman]

Thanks for accepting the solution
Please hit like button also.

[CRSYTALTOGEL]

https://portal.smksantamaria.sch.id/data/

[CRSYTALTOGEL]

https://portal.smksantamaria.sch.id/text/

[CRSYTALTOGEL]

https://portal.smksantamaria.sch.id/file/

[Rahul_dhiman]

Thanks for accepting the solution
Please hit like button also.