Customizing Variant picker border color, thickness and visibility

Chucklesfaq
Tourist
15 0 1

How can I make the border of the dropdown box used as Variant picker always visible?

Right now, it becomes visible only on hovering. I want it to be solid black color and always visible.

https://www.chuckles.store/products/vintage-nostalgia?variant=48137145418050

Replies 2 (2)

Liqiud_xPert_SJ
Shopify Partner
732 93 115

@Chucklesfaq 

 

please add below code into your base.css file

 

Online Store > Edit Code > Assets > base.css file

 

.product-form__input--pill input[type="radio"] + label {
	border-color: #000 !important;
}

2024-03-25 11_57_36-Butterfly Cat Unisex Softstyle T-Shirt – Chuckles — Mozilla Firefox.png

Thanks

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂

Vinsinfo
Shopify Partner
190 62 58

@Chucklesfaq Please follow below steps to always visible the border of the drop-down box. Let me know whether it is helpful for you.

 
1. From admin, go to "Online Store" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Search "section-main-product.css" file and paste below code at the bottom of the file.

 

.product__info-wrapper .product-form__input .select {
    box-shadow: 0 0 0 calc(.1rem + var(--inputs-border-width)) rgba(0 0 0);
}

 

Vinsinfo_0-1711349934020.png

 

4. Now, it will shown like below image.

Vinsinfo_1-1711350009811.png

 

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.