Ad

How To Set The Default Size Selector To Be Unselected?

- 1 answer

I'm looking to default my size variant selector to not select anything. Currently, it's selecting the smallest variant size. I want to change it so none of the variants are selected to start out with. Here's a perfect example on Urban Outfitters of how I want it to look. Shopify describes how to remove it from every theme but Brooklyn (which is what I'm using), but I'm thinking this would an easy fix to just have it not selected on anything. Here's my code.

<select name="id" id="ProductSelect" class="product-single__variants 
no-js">
{% 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>
Ad

Answer

If you are using the Button style selector just add the following code at the end of theme.js.liquid

This will reset the checkbox selection.

$(document).ready(function() {

    $('.product-form__item input[type=radio]').prop('checked', false);
});
Ad
source: stackoverflow.com
Ad