Hide sold-out variants

Caution

Vintage themes aren't available in the Theme Store. Vintage themes don't have the features included in Shopify's Online Store 2.0 themes, and Shopify free vintage themes don't receive updates except security fixes.

Note

If you use a free theme from Shopify, then you can contact Shopify Support for help with this tutorial. It requires 15 minutes of design time. Learn more about the Shopify Design Policy.

Note

This customization is for vintage Shopify themes, and doesn't apply to Online Store 2.0 themes.

• Find out your theme's architecture version
• Explore Online Store 2.0 theme customizations

You can prevent customers from selecting sold-out variants by removing or disabling those variants on the product page.

Limitations

The customizations outlined on this page don't work for the following cases:

• Your products have more than one product option.
• You use the Express theme and have the product page set to display products in an overlay.

Note

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme lets you drag and drop to arrange the layout of your home page, and a non-sectioned theme doesn't.

To figure out whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.

If you are using a sectioned theme, click the Sectioned themes button and follow the instructions. If you are using an older, non-sectioned theme, click the Non-sectioned themes button and follow the instructions.

Steps for Sectioned themes

Select your theme

The steps for this customization vary depending on your theme. Click the button for your theme before following the instructions below:

Steps for Non-sectioned themes

Hide sold-out variants

If you use a non-sectioned theme, then you can follow these steps to hide sold-out variants on the product page.

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
3. In the Snippets directory, click Add a new snippet.
4. Name your new snippet remove-sold-out:

   

5. In your new snippet file, paste the following code:

{% if product.options.size == 1 %}
<script>
  const addToCartForm = document.querySelector('form[action="/cart/add"]');
  if (window.MutationObserver && addToCartForm !== null) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() {
      let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
      {% for variant in product.variants %}
      {% unless variant.available %}
      variantOptions.forEach(function(element) {
        if (element.value === {{ variant.title | json }}) {
            element.remove();
        }
      });
      {% endunless %}
      {% endfor %}
      observer.disconnect();
    });
    observer.observe(addToCartForm, config);
  }
</script>
{% endif %}

1. Click Save.
2. In the Layout directory, click theme.liquid.
3. Near the end of the file, right before the closing </body> tag, paste the following code:

{% render 'remove-sold-out' %}

1. Click Save.

Deactivate sold-out variants

If you use a non-sectioned theme, then you can follow these steps to deactivate sold-out variants. The variants are still displayed on the product page, but they can't be selected.

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
3. In the Snippets directory, click Add a new snippet.
4. Name your new snippet disable-sold-out:

   

5. In your new snippet file, paste the following code:

{% if product.options.size == 1 %}
<script>
  const addToCartForm = document.querySelector('form[action="/cart/add"]');
  if (window.MutationObserver && addToCartForm !== null) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() {
      let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
      {% for variant in product.variants %}
      {% unless variant.available %}
      variantOptions.forEach(function(element) {
        if (element.value === {{ variant.title | json }}) {
            element.setAttribute('disabled', '');
        }
      });
      {% endunless %}
      {% endfor %}
      observer.disconnect();
    });
    observer.observe(addToCartForm, config);
  }
</script>
{% endif %}

1. Click Save.
2. In the Layout directory, click theme.liquid.
3. Near the end of the file, right before the closing </body> tag, paste the following code:

{% render 'disable-sold-out' %}

1. Click Save.