Customizing Variant picker border color, thickness and visibility

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.

Replies 2 (2)

Shopify Partner
732 93 115



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


- 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 🙂

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);




4. Now, it will shown like below image.




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