A Step-By-Step On How To Hide Unavailable Variations

Shopify does not automatically hide sold-out variants, which can lead customers to select unavailable options and leave the page. In this guide, NextSky explains how to hide unavailable variants using built-in Shopify settings, theme customisation, or apps to create a smoother shopping experience.

Understanding variant availability in Shopify

In Shopify, a variant represents a unique combination of product options (for example, color + size). A variant becomes unavailable when:

• Inventory reaches zero (out of stock).
• The variant is unpublished or archived.
• The combination does not exist (for example, there is no “Blue / XL” variant).
• The variant is manually restricted through metafields, tags, or location-based rules.

By default, Shopify displays all variants in dropdowns, swatches, or option buttons, even if they are unavailable. When selected, customers typically see messages such as “Sold Out” or “Unavailable,” but the option remains visible, which can clutter the product page.

Common Issues

• Sold-out colors can still be selected, resulting in a “Sold Out” button.
• Non-existent option combinations still appear, making shoppers assume they are available.
• This mismatch negatively impacts the user experience, especially on mobile devices.

Shopify’s built-in inventory settings

Shopify provides inventory management tools, but they do not completely hide variants from the variant picker.

Follow these steps:

1. Go to Products in your Shopify admin and select a product.
2. Open the Variants section and edit the variant you want to manage.
3. Enable Track quantity.
4. Disable Continue selling when out of stock.
5. Set Inventory quantity to 0.
6. Save your changes.

This prevents customers from purchasing out-of-stock variants, but most themes will still display them as disabled, grayed out, or crossed out.

Limitation: This method does not automatically hide unavailable variants or remove non-existent option combinations from the selector. To achieve that, you'll need theme customization or an app.

Using theme settings without coding

Many modern Shopify 2.0 themes (including Dawn and premium themes from NextSky and other providers) include built-in settings to hide unavailable variants.

Steps:

1. Go to Online Store → Themes → Customize.
2. Open the Product template.
3. Locate the Variant Picker or Product Information section.
4. Look for settings such as:
5. Enable the setting and save.

This approach works well for many stores and applies across your catalog. Be sure to check your theme documentation, as newer Dawn versions have significantly improved variant availability handling.

If your theme doesn’t offer this feature: consider upgrading to a more advanced theme or implementing a custom code solution.

Custom theme development for hiding variants

If your theme does not support this functionality natively, developers can use Liquid and JavaScript to hide unavailable variants.

Older liquid-based themes

Use a Liquid condition such as: {% if variant.available %} This ensures only available variants are rendered in the selector. It works best for simple product setups.

Dawn and Modern Shopify 2.0 Themes

Most variant logic is handled on the client side with JavaScript. One common approach is adding custom CSS to base.css:

.product-form__input input[type='radio'].disabled + label,

.product-form__input input[type='radio']:disabled + label {

 display: none !important;

}

Important notes

• Theme updates may overwrite custom code, so always duplicate your theme before making changes.
• Products with multiple option sets require additional testing and logic.
• This method is generally not recommended for beginners.
• Always test on desktop, tablet, and mobile devices before publishing.

Best practices for variant visibility

To maximize conversions and improve the shopping experience, follow these recommendations:

• Hide unavailable variants completely: Whenever possible, remove unavailable options entirely instead of displaying them as disabled or crossed out. This creates a cleaner interface and reduces customer frustration.
• Automate inventory syncing: Use solutions that automatically update variant visibility based on real-time inventory levels to avoid manual errors.
• Maintain consistent variant selectors: Use the same style of selector throughout your store—whether swatches, pills, or dropdown menus—to create a predictable user experience.
• Connect variants with product images: Update product images dynamically when shoppers select an available variant. This helps customers confirm they have chosen the correct option.
• Prioritize mobile testing: Since a large portion of Shopify traffic comes from mobile devices, ensure variant selectors remain intuitive and easy to use on smaller screens.
• Implement back-in-stock workflows: For popular products, consider combining hidden variants with waitlists or back-in-stock notification forms to capture customer demand.
• Consider SEO impact: Hiding variants within the user interface does not negatively affect product URLs or search indexing. Focus on maintaining a strong, optimised product page.

By implementing these best practices, merchants can create cleaner product pages, reduce customer frustration, improve add-to-cart rates, and ultimately increase overall store revenue.