How to Hide Unavailable Variants on Shopify: A Complete Guide (2025 Tutorial)

April 22, 2025

how to hide unavailable variants on shopfiy

Displaying sold-out or unavailable product variants can lead to customer frustration and lost sales. Fortunately, Shopify offers several methods to manage this issue effectively. In this guide, we’ll explore various strategies to hide or disable unavailable variants on your Shopify store.

1. Modify Theme Code to Hide Sold-Out Variants

For stores using Shopify’s vintage themes, you can customize your theme code to hide sold-out variants:

From your Shopify admin, go to Online Store > Themes.

Find the theme you want to edit, click Actions, and select Edit code.

In the Assets directory, locate and click on theme.js or theme.js.liquid or global.js.

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

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }
            }
          };

          const observer = new MutationObserver(mutationCallback);
          const config = { childList: true, subtree: true };
          const addToCartForm = section.querySelector('form[action="/cart/add"]');

          if (addToCartForm) {
            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

Click Save to apply the changes.

2. Use Shopify Apps to Manage Variant Visibility

If you’re not comfortable editing code, several Shopify apps can help manage variant visibility:

Camouflage – Hide Sold Variants: This app allows you to hide, disable, or strike-through sold-out variants. It offers customization options and works with the latest themes.

Nada: Sort & Hide Out-of-Stock: Automatically hides sold-out products by unpublishing them from the online store sales channel and republishes them when back in stock.

Managing the visibility of unavailable variants enhances the shopping experience and can lead to increased sales. Whether you choose to edit your theme code, use an app, adjust inventory settings, or automate with Shopify Flow, each method offers a way to keep your product pages clean and customer-friendly.

Keywords: