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.
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 %}
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.
