Remove sold out variants from options drop-downs

I recently had a client ask about making the variant drop-downs more intuitive when sizes/colors are sold out. I found this article from Shopify's support docs and it works great!

Locate Shopify's call to the Shopify.OptionSelectors constructor. It is usually located in product.liquid near the bottom of the template. The code looks like the below — it may not be exactly:

new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });

On the next line, right after the above line of code, add this code:

{% if product.options.size == 1 %}
  {% for variant in product.variants %}
    {% unless variant.available %}
    jQuery('.single-option-selector option').filter(function() { return jQuery(this).html() === {{ variant.title | json }}; }).remove();
    {% endunless %}
  {% endfor %}
  jQuery('.single-option-selector').trigger('change');
{% endif %}

That's it. Click Save.

If you want to keep the variant in the drop-down but have it grayed out and un-selectable ( disabled ), add the following code instead:

{% if product.options.size == 1 %}
  {% for variant in product.variants %}
    {% unless variant.available %}
    jQuery('.single-option-selector option:eq({{ forloop.index0 }})').attr('disabled', 'disabled');
    {% endunless %}
  {% endfor %}
  jQuery('.single-option-selector').trigger('change');
{% endif %}
Back to blog

Leave a comment

Please note, comments need to be approved before they are published.