Style color swatch radio button to Brooklyn Theme

Solved
Vinzq
New Member
2 0 0

Hi,

i followed this tutorial https://gist.github.com/carolineschnapp/ed47c42d48ae4100f7be to add color swatches to Brooklyn themes using hex value. 

It's works fine

Immagine 2021-04-20 095453.jpg

but I wish there was a white space around selected color like this

115107495-70ef9a80-9f6b-11eb-98dd-b2ab50d025ab.png

Someone has a solution?

0 Likes
Pallavi
Shopify Expert
1338 181 219

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes

This is an accepted solution.

Hello @Vinzq,

Add box-shadow & text-indent property as shown below.

 

#ProductSelect-option-#{$colorName}:checked + label {
    border-color: #555;
    border-width: 1px;
    box-shadow: 0px 0px 0px 3px #fff inset;
    text-indent: -2000px;
}

 

 

I hope this is what you are looking for.

Please let me know if it works for you.

Good Luck!

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
0 Likes
Vinzq
New Member
2 0 0

Thanks @Zeian_Shahzad,

it's works fine!

0 Likes

@Vinzq,

You're welcome.

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
0 Likes