How to get this type of variant apperance

[dharmil]

how to get this type of variant appearance in the focal theme!

we have this type of variant it looks like a kiddish 
our website - https://sugercandy.com

[Rahul_dhiman · Accepted solution]

Hello @dharmil 
Go to the customization of your theme and do these changes.
1) To make the Size button in  circle shape.

2) to make the colour swatches in circle shape. ( click on the round color swatches)

If you find this helpful, please like and mark the job as completed.
Thanks

[Rahul_dhiman · Accepted solution]

Hello @dharmil 
Go to the customization of your theme and do these changes.
1) To make the Size button in  circle shape.

2) to make the colour swatches in circle shape. ( click on the round color swatches)

If you find this helpful, please like and mark the job as completed.
Thanks

[dharmil]

it showing like this 😞  

[BSS-TekLabs · Accepted solution]

Hi @dharmil,

You can follow these steps to make the variant buttons appear like that

1. Open Online Store > Theme > Edit Code

2. Find and open theme.css (or base.css, custom.css, styles.css) file

3. Paste the code snippet below to the bottom of the file and hit save

.block-swatch .block-swatch__item {
    min-width: 50px;
    height: 50px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f3f3f3;
    border: none;
}

.block-swatch input:focus + .block-swatch__item {
    background: black;
    color: white;
    border: 3px solid white;
    outline: 1px solid black;
}

.block-swatch .block-swatch__item:after {
    border-radius: 50px;
}

Here is the result

https://www.loom.com/share/5eecd406b73648059ff648720e08365b

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

[dharmil]

Thanks bro ❤️ it really helped me