Shopify themes, liquid, logos, and UX
I have changed the dropdown variant selection in to radio buttons in minimal theme but having now think javascript is not running , i am unable to open menu on mobile and product images are not working.
page link
https://www.jacquard.pk/collections/winter/products/yellow-blooms?variant=31198498062447
OLD CODE
<select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
new code
<div id="ProductSelect-{{ variant.id }}" class="product-variants infiniteoptions">
<ul>{% for variant in product.variants %}
<li class="{% cycle 'odds': 'odd', 'even' %}">
{% if variant.available %}<input type="radio" name="id" value="{{ variant.id }}" id="radio_{{ variant.id }}" {% if forloop.first %}checked="checked"{% endif %} />
<label for="radio_{{ variant.id }}" class="radio">
{{ variant.title | escape }}
</label>
{% else %}
<input type="radio" name="id" value="{{ variant.id }}" id="radio_{{ variant.id }}" disabled="disabled" />
<label for="radio_{{ variant.id }}" class="radio">
{{ variant.title }} (out of stock)
</label>
{% endif %}
</li>
{% endfor %}</ul>
</div>
id="ProductSelect-{{ section.id }}"
when ever i remove this everything on page stop working
@numairnj this code snippet work for me, can you share the web console error log.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024