How can I modify the outline of non-selected product variants?

Store Design
1

My store is www.revailco.com and Im wondering if I can change the non-selected variants to have a skinny outline rather than a light fill

1st image is mine currently, 2nd is what I want it to look like. Thanks!

e14ef4e291458a29657c7e6d4c77ee6a.png

0e66eb64ca4350d9f815ffe301b85046.png

2

Hi @Revail , let’s fix this within 5 seconds. Add this CSS to your theme.scss file and see

.single-option-radio input[type=radio]:not(:checked)+label {
    background-color: #ffffff !important;
    border-color: #d8d8d8 !important;
    color: #696969 !important;
}

It’s working fine from my side, kindly check and have a nice day.

Ajay_kumar_dev_0-1629538049505.png
Ajay_kumar_dev_0-1629538049505.png554×149 2.43 KB

3

Appreciate it! Is there also a script to make the Sort by Featured part in my collection / product pages also boxed?

a54749f0d25169df9d24a36540723238.png
a54749f0d25169df9d24a36540723238.png360×144 2.58 KB

4

Also, sorry if this is a lot to ask but if you’re not busy, can you check out my two other posts? Thank you so much!

https://community.shopify.com/c/Shopify-Design/Debutify-custom-font-doesn-t-work/m-p/1287105

https://community.shopify.com/c/Shopify-Design/Add-product-sizes-to-replace-product-title-underneath-product/m-p/1287072#M335045

5

ok let me check