Change variant selector - Dawn Theme

Change variant selector - Dawn Theme

Julietteweb
Explorer
59 0 10

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.png2.png

Reply 1 (1)

EcomGraduates
Shopify Partner
757 66 110

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 <select> dropdown to restore the old style:

 

<select id="product-variant-dropdown" name="id">
{% for variant in product.variants %}
<option value="{{ variant.id }}">
{{ variant.title }} - {{ variant.price | money }}
</option>
{% endfor %}
</select>

 

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%;
}

 


 If this fixed your issue, likes and accepting as a solution are highly appreciated
|  Build an online presence with our custom-built Shopify Theme: EcomifyTheme
|  Check out our reviews: Trustpilot Reviews
|  We are Shopify Partners: EcomGraduates Shopify Partner