How to get this type of variant apperance

Solved

How to get this type of variant apperance

dharmil
Excursionist
28 0 1

Screenshot 2024-06-22 at 12.55.00 PM.pnghow 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
Screenshot 2024-06-22 at 12.56.07 PM.png

Accepted Solutions (2)

Rahul_dhiman
Shopify Partner
234 44 43

This is an accepted solution.

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

 

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

 

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

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here

View solution in original post

BSS-TekLabs
Shopify Partner
608 174 205

This is an 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!

 

 

 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 4 (4)

Rahul_dhiman
Shopify Partner
234 44 43

This is an accepted solution.

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

 

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

 

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

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
dharmil
Excursionist
28 0 1

Screenshot 2024-06-22 at 1.53.05 PM.png

it showing like this 😞  

BSS-TekLabs
Shopify Partner
608 174 205

This is an 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!

 

 

 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
dharmil
Excursionist
28 0 1

Thanks bro ❤️ it really helped me