Shopify themes, liquid, logos, and UX
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!
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
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024