How to Hide Out-of-Stock Variants on Shopify (Horizon Theme Guide)

As a Shopify migration expert at Shopping Cart Mover, we constantly see merchants striving to perfect every aspect of their online store. One common challenge that often arises, particularly for those using themes like Horizon, is managing how out-of-stock product variants are displayed. Imagine a customer landing on your product page, excited to make a purchase, only to be confronted by a bewildering array of crossed-out colors or sizes. It's a frustrating experience that can quickly lead to abandoned carts and lost sales.

Recently, a valuable discussion unfolded in the Shopify Community forums, initiated by Hervé, a store owner from Paris. He perfectly articulated the problem: his Horizon theme was showing unavailable variants as crossed out, yet still visible in the product selector. Hervé sought a cleaner solution – to completely hide these out-of-stock options, presenting only what was genuinely available. This desire for a less "deceptive" and more streamlined customer journey, especially for products with numerous variants, resonates with many of our clients.

Why a Clean Product Page Matters for Your Shopify Store

The impact of a cluttered product page on customer experience cannot be overstated. When shoppers encounter a multitude of unavailable options, it creates a sense of hitting dead ends. This isn't just a minor annoyance; it can significantly detract from the shopping experience, leading to:

• Customer Frustration: Constantly clicking on unavailable options is irritating and time-consuming.
• Perceived Scarcity (Negative): While scarcity can drive sales, a page full of out-of-stock items can make your store seem poorly stocked or disorganized.
• Increased Bounce Rates: Frustrated customers are more likely to leave your site without making a purchase.
• Damaged Brand Image: A messy product page can reflect poorly on your brand's professionalism and attention to detail.

For businesses with extensive product lines and complex variant matrices (e.g., multiple sizes, colors, materials), minimizing this visual noise is absolutely crucial. A clean, intuitive variant selector allows customers to quickly identify what's in stock, making their purchasing decision smoother and more enjoyable. This is a fundamental aspect of building a successful Shopify store that keeps customers coming back.

The Challenge: Horizon Theme's Default Behavior

Many Shopify themes, including Horizon, are designed to display all product variants by default, marking unavailable ones with a "crossed-out" style. While this approach ensures customers see the full range of options (even if not currently available), it lacks the flexibility some merchants need for a truly minimalist or efficient user interface. There isn't a simple toggle in the theme settings to hide these out-of-stock variants completely. This is where a targeted code adjustment comes into play.

The Community-Approved Solution: Hiding Variants with Custom CSS

The Shopify community, ever resourceful, quickly provided a robust, code-based solution that Hervé successfully implemented. This method involves adding a small CSS snippet directly into your theme, specifically targeting the elements that display unavailable variants.

Step-by-Step Guide to Implement the Fix:

Here’s how you can implement this solution for your Horizon theme, or any other theme with similar variant selector structures:

1. Access Your Shopify Theme Editor:
   • From your Shopify admin, go to Online Store > Themes.
   • Find your current theme (Horizon) and click Customize.
   • Navigate to a product page within the editor.
2. Add a Custom Liquid Block:
   • In the left-hand panel, under "Product information" or "Details," click Add block.
   • Search for "Liquid" and select Custom Liquid.
3. Paste the CSS Snippet:
   • Click on the newly added "Custom Liquid" block.
   • In the "Liquid code" box, paste the following CSS:

4. Save Your Changes:
   • Click Save in the top right corner of the editor.

This CSS snippet works by targeting the label of any variant option button that contains an input field with the `data-option-available="false"` attribute. By setting `display: none !important;`, it completely removes these unavailable options from view.

What This Fix Achieves:

• Dynamic Hiding: The theme remains smart. If a color is out of stock for one size but available for another, it will only be hidden when the unavailable size is selected.
• Improved Clarity: Shoppers first pick a size, then see only the colors actually available for that size.
• No Loss of Functionality: Sold-out variants were already prevented from being added to the cart, so this simply cleans up the presentation.

Advanced Considerations for a Seamless Experience

While the basic CSS snippet is highly effective, Ecom_swift_LLC from the community discussion offered crucial insights for a truly robust solution:

1. Handling Dropdown Style Pickers:

If your products use dropdown selectors instead of swatches, the initial CSS won't apply to the labels. You'll need an additional rule:

css
/* dropdown-style pickers */
.variant-option select option[data-option-available="false"] { display: none !important; }

Add this within the same `