Change format of Variant selection button

Store Design
1

Hi there,

I’m looking to make a change to the format of the variant selection button but can’t see how to do that in the coding. Right now it is only the border colour that distinguishes the selection made by the customer.

Instead I would like the fill colour of the button selected to change too, so it is easy to distinguish what has been selected.

This is the current view:

lyndsayR_0-1641311602363.png
lyndsayR_0-1641311602363.png864×346 24.4 KB

However I would like the button to look like this when selected:

lyndsayR_1-1641313493708.png
lyndsayR_1-1641313493708.png660×180 14.1 KB

Here is the link to the page: https://www.conscious.cleaning/products/toilet-cleaner?variant=41325603553479

Thanks so much,

Lyndsay

2

Hi @lyndsayR

Hello

To change format of Variant selection button, add this code to your theme.scss or theme.css file.

Navigate to online store >> Click edit theme code.

Now find theme.scss or theme.css and paste the following code:

.radio__fieldset .radio__button input:checked~label {
    background: #008cb4 !important;
}

After adding the CSS you see the changes.

Screenshot_15.png
Screenshot_15.png912×748 32.8 KB

I hope it will be helpful for you.

Thanks

Did it solve your issue?

- If yes, Like & Mark As Solution to help the community

- If not, let me know. also share a screenshot of the code that you added.

3

Please add below code in bottom of assets/theme.css file.

.radio__fieldset .radio__button input:checked~label {
background: #369694;

}
Thank you.

4

Thanks so much for sharing this code! It worked perfectly.

Do you know how I go about changing the font colour to white when it’s selected so it matches the Add to Cart button?

Thanks so much again!

Lyndsay

5

Please add below code in bottom of assets/theme.css file.

.radio__fieldset .radio__button input:checked~label{
color: #fff;

}
Thank you.

6

Thank you so much! This has fixed the problem perfectly!