Hide sold-out variants

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

Sectioned and non-sectioned themes

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme is a newer theme that lets you drag and drop to arrange the layout of your store's pages.

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, then click the Sectioned themes button and follow the instructions. If you are using an older, non-sectioned theme, then click the Non-sectioned themes button and follow the instructions.

Limitations

If you have enabled multiple locations on your store, then you can't use the theme customization outlined on this page.

If your products have more than one product option, then you need to link your product options instead of following this tutorial.

Hide sold-out variants

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

  1. In the Sections directory, click product-template.liquid.

  2. At the bottom of the file, paste the following code:

    {% if product.options.size == 1 %}
      <script>
        var product_variants_removed = [
          {%- for variant in product.variants -%}
            {%- unless variant.available -%}
              `{{ variant.title }}`,
            {%- endunless -%}
          {%- endfor -%}
        ];
      </script>
    {% endif %}
  3. In the Assets directory, click theme.js or custom.js.

  4. If you use a free theme from Shopify other than Brooklyn or Narrative, then at the bottom of the file, paste the following code:

    $( document ).ready(function() {
      if( typeof product_variants_removed != "undefined" ) {    // was there items to be removed?
        var $addToCartForm = $('form[action="/cart/add"]');
        if (window.MutationObserver && $addToCartForm.length) {
          if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
            observer.disconnect();
          }
          var config = { childList: true, subtree: true };
          var observer = new MutationObserver(function() {
            product_variants_removed.forEach(function(item){
              $('.single-option-selector option').filter(function() { return $(this).text() === item; }).remove();
            });
            observer.disconnect();
          });
          observer.observe($addToCartForm[0], config);
          $('.single-option-selector').trigger('change');
        }
      }
    });

    If you use Brooklyn, then at the bottom of the file, paste the following code:

    $( document ).ready(function() {
      $('single-option-selector__radio').trigger('change');
      if( typeof product_variants_removed != "undefined" ) {    // was there items to be removed?
        var $addToCartForm = $('form[action="/cart/add"]');
        if (window.MutationObserver && $addToCartForm.length) {
          if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
            observer.disconnect();
          }
          var config = { childList: true, subtree: true };
          var observer = new MutationObserver(function() {
            product_variants_removed.forEach(function(item){
                  $('#ProductSelect-option-size-'+item).remove();
              $('label[for=ProductSelect-option-size-'+item+']').remove();
            });
            observer.disconnect();
          });
          observer.observe($addToCartForm[0], config);
          $('.single-option-selector__radio').trigger('change');
        }
      }
    });

    If you use Narrative, then at the bottom of the custom.js file, paste the following code:

    $( document ).ready(function() {
      if( typeof product_variants_removed != "undefined" ) {    // was there items to be removed?
        var $addToCartForm = $('form[action="/cart/add"]');
        if (window.MutationObserver && $addToCartForm.length) {
        var config = { childList: true, subtree: true };
            product_variants_removed.forEach(function(item){
              $('.single-option-selector option').filter(function() { return $(this).text() === item; }).remove();
            });
        }
      }
    });
  5. Click Save.

Disable sold-out variants

If you use a 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. In the Sections directory, click product-template.liquid.

  2. At the bottom of the file, paste the following code:

    {% if product.options.size == 1 %}
      <script>
        var product_variants_removed = [
          {%- for variant in product.variants -%}
            {%- unless variant.available -%}
              `{{ variant.title }}`,
            {%- endunless -%}
          {%- endfor -%}
        ];
      </script>
    {% endif %}
  3. In the Assets directory, click theme.js or custom.js.

  4. If you use a free theme from Shopify other than Brooklyn or Narrative, then at the bottom of the file, paste the following code:

    $( document ).ready(function() {
      if( typeof product_variants_removed != undefined ) {  // was there items to be removed?
        var $addToCartForm = $('form[action="/cart/add"]');
        if (window.MutationObserver && $addToCartForm.length) {
          if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
            observer.disconnect();
          }
          var config = { childList: true, subtree: true };
          var observer = new MutationObserver(function() {
            product_variants_removed.forEach(function(item){
              $('.single-option-selector option').filter(function() { return $(this).text() === item; }).prop('disabled', true);
            });
            observer.disconnect();
          });
          observer.observe($addToCartForm[0], config);
          $('.single-option-selector').trigger('change');
        }
      }
    });

    If you use Brooklyn, then at the bottom of the file, paste the following code:

    $( document ).ready(function() {
      $('single-option-selector__radio').trigger('change');
      if( typeof product_variants_removed != undefined ) {  // was there items to be removed?
        var $addToCartForm = $('form[action="/cart/add"]');
        if (window.MutationObserver && $addToCartForm.length) {
          if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
            observer.disconnect();
          }
          var config = { childList: true, subtree: true };
          var observer = new MutationObserver(function() {
            product_variants_removed.forEach(function(item){
              $('#ProductSelect-option-size-'+item).remove();
              $('label[for=ProductSelect-option-size-'+item+']').prop('disabled', true);
            });
            observer.disconnect();
          });
          observer.observe($addToCartForm[0], config);
          $('.single-option-selector__radio').trigger('change');
        }
      }
    });

    If you use Narrative, then at the bottom of the custom.js file, paste the following code:

    $( document ).ready(function() {
      if( typeof product_variants_removed != undefined ) {  // was there items to be removed?
        var $addToCartForm = $('form[action="/cart/add"]');
        if (window.MutationObserver && $addToCartForm.length) {
        var config = { childList: true, subtree: true };
            product_variants_removed.forEach(function(item){
              $('.single-option-selector option').filter(function() { return $(this).text() === item; }).prop('disabled', true);
            });
        }
      }
    });
  5. Click Save.


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. In the Snippets directory, click Add a new snippet.

  2. Name your new snippet remove-sold-out:

    Add new snippet

  3. In your new snippet file, paste this code hosted on GitHub.

  4. Click Save.

  5. In the Layout directory, click theme.liquid.

  6. Near the end of the file, right before the closing </body> tag, paste the following code:

    {% render 'remove-sold-out' %}
  7. 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. In the Snippets directory, click Add a new snippet.

  2. Name your new snippet disable-sold-out:

Add new snippet

  1. In your new snippet file, paste this code hosted on GitHub.

  2. Click Save.

  3. In the Layout directory, click theme.liquid.

  4. Near the end of the file, right before the closing </body> tag, paste the following code:

    {% render 'disable-sold-out' %}
  5. Click Save.

Ready to start selling with Shopify?

Try it free