Change variant selector - Dawn Theme

Store Design
, ,
1

Hello,

I’d like to change the look of my Variant pill on my product page. I want to keep the rectangular selector, but when you click on it, I’d like it to appear in the old way (as on screenshot 2) and not as it does today (screenshot 1).

Sure, it’s more modern, but I don’t like it.

Does anyone know how to change this?

Here’s the url to my product page: https://ancestraathletes.com/products/athlete-air-tape

Thanks for your help!

1.png
1.png1000×2050 242 KB

2.png
2.png1000×2050 89.1 KB

2

Find the section where the variant selector is rendered. It will typically look something like this:

{{ product.options | select_tag: ‘id’, ‘size’ }}

If your current selector is styled to use pills, this code might be customized with some classes. Change it to a standard HTML {% for variant in product.variants %} {{ variant.title }} - {{ variant.price | money }} {% endfor %}

iif the dropdown’s style is being overridden by CSS to use pills, you can add some custom CSS to revert it to the default appearance

select #product-variant-dropdown {
appearance: auto; /* Ensure default dropdown style */
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px;
width: 100%;
}