Hide sold-out variants

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

Sectioned and non-sectioned themes

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.

  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:
    Add new snippet
  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.

Disable sold-out variants

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

  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:
    Add new snippet
  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.
Ready to start selling with Shopify?Try it free