A commen question we get asked is how to hide out of stock variants in Shopify. A variant is an option within a product such as color or size. By default when a variant goes to zero it will still show up on the product page but a customer cannot add it to their shopping cart because its sold out. This can create a maintenance nightmare as the only way to hide it is to delete it. 

This post will show you how to hide out of stock variants in the Turbo theme by Out of The Sandbox . While the basic code should work on most themes we work with Turbo because in our humble opinion it is by far the best theme out there. I have also included a link to a Shopify post on the subject for the free themes below. 

The screen print shows the problem of  sold out variants cluttering the product page.

Hide Variants in Shopify


Hiding variants requires a little liquid coding. If you want a basic intro to liquid take my Skillshare Class : Coding 101 Liquid For Shopify

The key is to find the code that loads the variants on the product page. In Turbo that code is located in Product-Swatch.Liquid which is a snippet.  In the code below we can see a FOR LOOP which cycles through the variants and places a swatch for the variant on the product page. Within this we added the bold IF Statement so that we are now only building the swatches for in stock variants. 

  {% for variant in product.variants %}

     {% if variant.available %}
       {% assign value = variant.options[option_index] %}
         {% unless values contains value %}
         {% assign values = values | join: ',' %}
         {% assign values = values | append: ',' | append: value %}
         {% assign values = values | split: ',' %}
           {% if is_color %}
            {{ value }}
           {% endif %}
           {% if is_color %}  
           {% else %}
           {% endif %}
         {% endunless %}
     {% endif %}
 {% endfor %}

The result of this code is

You can also find a post from Shopify on this subject here

Leave a comment (all fields required)

Comments will be approved before showing up.