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 
{% 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.title }} - {{ variant.price | money_with_currency }}
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
{% endif %}
{% endfor %}


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);