Hide sold-out variants

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

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

Sectioned and non-sectioned themes

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. Find the theme you want to edit, and then click Actions > Edit code.

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

  3. 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 %}
  4. In the Assets directory, click theme.js or custom.js.

  5. 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();
            });    
        }
      }
    });
  6. 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. Find the theme you want to edit, and then click Actions > Edit code.

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

  3. 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 %}
  4. In the Assets directory, click theme.js or custom.js.

  5. 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);
            });    
        }
      }
    });
  6. 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. Find the theme you want to edit, and then click Actions > Edit code.

  2. In the Snippets directory, click Add a new snippet.

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

    Add new snippet

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

  5. Click Save.

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

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

    {% include 'remove-sold-out' %}
  8. 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. Find the theme you want to edit, and then click Actions > Edit code.

  2. In the Snippets directory, click Add a new snippet.

  3. 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:

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

Ready to start selling with Shopify?

Try it free