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

April 22, 2025

how to hide unavailable variants on shopfiy

Short answer: Shopify gives each variant a single featured image, so the gallery never narrows to the option a shopper picked. Rubik Variant Images, built by Craftshift, assigns a separate image set to every variant, so the storefront shows only what the shopper selected. Free to install, 5.0 stars across 420 reviews.

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:

Hide unavailable variants Shopify
Hide sold-out variants Shopify
Shopify hide out-of-stock variants
Shopify variant visibility
Shopify hide sold-out options
Shopify hide product variants
Shopify hide unavailable options
Shopify hide variants in dropdown
Shopify hide sold-out combinations
Shopify hide variants when out of stock
How to hide sold-out variants in Shopify
Shopify hide unavailable product options
Shopify hide out-of-stock variants in dropdown
Shopify hide sold-out variants in product page
Shopify hide unavailable variant combinations
Shopify hide sold-out variants app
Shopify hide sold-out variants code
Shopify hide sold-out variants theme
Shopify hide sold-out variants script
Shopify hide sold-out variants liquid

Frequently asked questions

Which Shopify app hides sold-out variants and their images at the same time?

Rubik Variant Images, built by Craftshift, assigns a separate image set to every variant and can hide sold-out options from the swatch row, so the picker and the gallery stay in step. It holds 5.0 stars across 420 reviews and carries the Built for Shopify badge. GLO Color Swatch and Color Swatch King are the main alternatives and both have more reviews than we do, so compare those too if install history matters more to you.