Hiding Out of Stock Variants

There are two options for this. The first would be to follow Shopify's guide linked here:

Shopify Help - Hiding Variants that are Sold Out guide

Alternatively, try the following steps if you wish for "sold out" text to appear next to your variants in the variant dropdown, like this:

Variants sold out

Step 1:

The following code has been tested on the latest version of our themes.

Before beginning, we advise you make a backup of your current theme to ensure you can jump back to this if this tutorial does not work for your specific theme version.

Advice on theme updates is listed at the bottom of this page, under "related articles".

Add the following code to product-template.liquid within the {% for value in option.values %}

{% comment %}Sold out should be displayed in the select where there is just one option{% endcomment %}
{% if product.options_with_values.size == 1 %}
{% assign show_sold_out = 1 %}
{% else %}
{% assign show_sold_out = 0 %}
{% endif %}
{% comment %}Check if the only option is sold out{% endcomment %}
{% assign sold_out = false %}
{% if show_sold_out %}
{% for variant in product.variants %}
{% if variant.option1 == value %}
{% unless variant.available %}
{% assign sold_out = true %}
{% endunless %}
{% endif %}
{% endfor %}
{% endif %}

Step 2

Replace the current option code with the following:

<option {{ props }} value="{{ value | escape }}">{{ value }}{% if sold_out %} - {{ 'products.product.sold_out' | t }}{% endif %}</option>

To hide this option completely:

{% unless sold_out %}<option {{ props }} value="{{ value | escape }}">{{ value }}</option>{% endunless %}

Need help with coding?

We have a number of trusted coding customisation specialists, all of which are grouped for your convenience under our help guide:

Apps

Additionally, you could try apps such as these: Wipeout - Shopify apps Zero-out - Shopify apps This app moves Products to the bottom of a Collection as opposed to hiding them:

Out-of-Stock Police App