Shopify make variant unavailable

June 26, 2025

How to Hide Unavailable Variants in Shopify

Learn how to hide unavailable variants in Shopify using settings, theme customizations, or apps to create a cleaner shopping experience and reduce drop-offs.

When customers land on your product page and select a size or color only to find it's out of stock, it creates friction and frustration. Shopify doesn’t automatically hide sold-out variants, which can clutter the buying experience and lead to abandoned carts.

69% of online shoppers will leave and shop elsewhere when their chosen item is out of stock. Leaving sold-out variants visible only speeds up that exit, especially if customers find out too late.

This guide walks through multiple ways to hide unavailable variants using Shopify’s built-in options, theme customizations, and advanced app-based automation.

Understanding Shopify Variant Availability

In Shopify, a variant becomes unavailable when its inventory reaches zero, it’s unpublished, or it’s archived. However, Shopify’s default behavior is to continue displaying all variants, available or not, within the product dropdown or swatch selector.

Unavailability can refer to more than just stockouts. It may include:

Variants with inventory = 0 (sold out)
Unpublished or archived variants
Combinations that don’t exist (e.g. a color-size pairing that isn’t valid)
Variants hidden manually using metafields or conditional logic

Example 1: Sold-Out Variant Still Visible

Source

This is an example of a sold-out variant still being shown; customers can select the color and size, but are met with a “Sold out” button at checkout.

Example- 2: Variant Option Selectable, But Unavailable

Source

This is an unavailable variant combination. The product never existed in Green / XL, yet Shopify shows it as selectable. The system responds with a generic “Unavailable” message instead of preventing the choice upfront.

This often confuses shoppers, who may assume the variant is selectable or in stock. When they click through only to find they can’t add it to the cart, it creates frustration and can damage trust in your store’s accuracy.

Why Hiding Unavailable Variants Matters

Displaying out-of-stock variants can lead to confusion and unnecessary friction in the buyer journey. Instead of helping users find what’s available, it clutters the interface and erodes trust in your product listings.

Here’s why hiding unavailable variants is important:

Improves User Experience – Customers won’t waste time selecting options that can’t be purchased.
Boosts Conversion Rates – Shoppers are more likely to complete purchases when only in-stock options are shown.
Reduces Frustration and Bounce Rates – Visitors are less likely to leave your site due to misleading or cluttered variant selectors.
Signals a Well-Maintained Store – Clean presentation reflects operational reliability and inventory accuracy.
Cuts Down Support Requests – Fewer questions about "why I can’t select this variant" means less time spent on customer service.

Unfortunately, Shopify doesn’t provide an inbuilt feature to hide unavailable variants automatically. However, several effective workarounds, from theme-level tweaks to dedicated apps, allow you to manage what customers see cleanly.

Native Shopify Settings: Basic Visibility Control

Shopify includes a few basic tools to manage variant availability, but they fall short when hiding unavailable options from the product page. This section covers what those tools are and how to use them.

What Shopify’s Native Settings Can Do

Inventory Tracking: Enable this setting to let Shopify monitor stock levels for each variant.
Disabling Backorders: Uncheck "Continue selling when out of stock" to stop purchases once inventory reaches zero.
Default Display Behavior: Even after disabling backorders, Shopify will still show sold-out variants in dropdowns or swatches, making them visible but unselectable.

Step-by-Step: Using Native Inventory Settings

From the Online Store, navigate to your Products page and select the product with the variant you want to hide.

Source

Scroll down to the Variants section and click Edit on the variant you want to hide.

Source

In the Inventory section, uncheck the box that says Continue selling when out of stock under Track quantity.

Source

In the Available area, set the stock Quantity to 0.

Source

Click Save.

Source

Limitations of This Method

This method stops customers from purchasing sold-out variants but does not improve visual clarity. The unavailable variants remain on the product page, creating potential confusion or frustration.

If your goal is to fully remove or hide sold-out variants from the selector, you'll need to explore theme modifications or apps, which we’ll cover next.

Using Shopify Themes That Support Auto-Hiding

Some Shopify themes include built-in settings to automatically hide variants that are out of stock. This is a simple, no-code option that can work well for stores using supported themes.

Themes like Dawn, Craft, and other modern Shopify 2.0 themes often support conditional visibility for variants. When enabled, out-of-stock options are hidden from dropdown menus and swatch selectors entirely, reducing clutter and improving UX.

How to Check if Your Theme Supports It

Go to Online Store > Themes > Customize.
Navigate to your Product pages settings.
Look under the Variant picker or similar section.
If your theme supports it, you’ll find a toggle like "Hide unavailable variants" or "Disable out-of-stock options".

What If Your Theme Doesn’t Support It?

If your current theme doesn’t include this feature, you have two options:

Switch to a compatible theme that supports variant hiding.
Use a theme customization or app-based solution, which we’ll explore next.

This method is ideal for beginners or store owners who want a quick fix without modifying code or installing third-party tools.

Customizing Theme Code (Liquid Method)

If your theme doesn't offer a built-in toggle to hide unavailable variants, editing the theme code is another option, but it depends heavily on the theme structure. This approach splits into two categories: older themes using Liquid-only rendering, and newer themes like Dawn using JavaScript-based selectors.

For Older Themes (Liquid-Only Rendering)

Older Shopify themes typically render variant selectors using Liquid. In these themes, developers can conditionally output only available variants using simple {% if variant.available %} logic.

This approach works best for single-option products and is relatively safe for developers to implement. You can explore this in the Shopify Community here: Hide Variants with 0 Stock – Shopify Community

For Modern Themes Like Dawn (JavaScript-Based)

Themes like Dawn (Shopify 2.0) handle variant logic in JavaScript using data stored in JSON format. Liquid conditions won’t help in this setup because the final display happens after the page loads.

To hide unavailable variants here, you'd need to:

Modify or extend the theme’s variant JS logic, or
Use pre-written contributions like this: Dawn Theme GitHub PR – Hide Unavailable Variants.

These changes involve editing files like variant.js, which may be challenging without development experience.

Limitations to Keep in Mind

Liquid-only logic doesn't support multiple options (like Size + Color).
JS-based edits can break with theme updates.
Not beginner-friendly. Recommended only for developers or theme specialists.

If you’re not confident editing code, the safer route is to use a modern theme with a toggle option or install a variant management app. We'll explore those in the next section.

Using Shopify Apps to Hide Unavailable Variants

If you want to hide unavailable variants without editing theme code, Color Swatch King: Variant by StarApps Studio offers a comprehensive and beginner-friendly solution built for Shopify.

Color Swatch King: Variant automatically hides out-of-stock variants from swatch pickers, dropdowns, and button-based selectors, making your product pages cleaner and easier to navigate. It’s ideal for stores with complex product options where native Shopify tools or code edits fall short.

Swatch King makes it easy to improve your product pages with features like:

Automatically hiding out-of-stock variants across swatches, buttons, and dropdowns
Letting you customize the look of your variant pickers with color swatches, labels, and badges
Supporting advanced layouts like tabs and accordions for better product info organization
Working smoothly with all modern Shopify themes, including Dawn
Bulk uploading swatches and linking them with variant images—no manual setup required
Helping shoppers make faster decisions with cleaner, more visual variant selection

Color Swatch King is built for scale, trusted by thousands of Shopify stores, and designed to reduce decision fatigue while improving visual clarity.

You can install it directly from the Shopify App Store and start hiding unavailable variants instantly, no developer needed.

While apps solve the technical challenge of hiding unavailable variants, getting the most out of them depends on how you structure your product setup, display logic, and customer experience. Before you apply any changes, it's worth reviewing a few best practices that make variant visibility truly effective.

Best Practices for Variant Visibility

No matter which method you use, built-in settings, theme tweaks, or an app like Swatch King, your goal should be to make variant selection easy, clean, and intuitive. Here are some key practices to follow:

Hide what can’t be bought: If a variant is unavailable, remove it from the selection interface altogether. This prevents shopper frustration and keeps the path to purchase clear.
Use automation where possible: Don’t rely on manual updates for large catalogs. Use apps that automatically manage visibility based on stock levels to avoid errors and save time.
Avoid confusing visual states: Grayed-out swatches, crossed-out labels, or disabled dropdowns can still create false hope. If a variant can’t be selected, it’s better to hide it completely.
Keep variant layouts consistent across products: Whether you use buttons, swatches, or dropdowns, stick with one consistent display style throughout your store to reduce cognitive load.
Ensure mobile compatibility: Always check that your variant selectors behave the same on mobile devices—some layouts or third-party apps may look different or behave inconsistently on small screens.
Pair each visible variant with a relevant image: If a color or style is available, show its matching image. This reinforces trust and helps shoppers quickly visualize their choice.

These best practices not only improve conversion but also reduce support requests and cart abandonment. They set the foundation for a smooth, frustration-free buying experience.

Conclusion

Leaving unavailable variants visible adds clutter and confusion to your product pages. The most effective way to keep your storefront clean is to hide options that can’t be purchased automatically, without relying on manual edits.

Color Swatch King: Variants by StarApps handles this with precision. It hides sold-out variants across dropdowns, swatches, and buttons, giving your customers a smoother path to purchase.

Start using Swatch King today to clean up your variant selectors and improve your store’s conversion experience, no code, no hassle.

FAQs

1. Can I hide sold-out variants in Shopify without using an app?
Yes, you can hide or disable variants manually using inventory settings or custom theme code, but these methods may be limited based on your theme and variant structure.

2. Does Shopify offer a built-in setting to hide unavailable variants?
Some Shopify 2.0 themes include a setting to hide out-of-stock variants, but it’s not available across all themes and may not handle complex variant combinations.

3. Will hiding variants affect my SEO or product indexing?
No. Hiding unavailable variants in selectors won’t affect your product URLs or search indexing, as long as the main product remains visible and accessible.

4. What’s the difference between disabling and hiding variants?
Disabling makes a variant unpurchasable but still visible, often grayed out. Hiding removes it from view entirely, reducing confusion for shoppers.

5. Can I control variant visibility automatically?
Yes. Some third-party apps allow you to automate hiding or showing variants based on real-time stock levels, saving you from manual updates.