Hiding Out of Stock Variants

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

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

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.

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 {% if option.selected_value == value %}selected{% endif %} value="{{ value }}">
  {{ 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​