Declutter Your Shopify Product Pages: How to Hide Out-of-Stock Variants in the Horizon Theme

View original discussion by lelongdelajambe on Shopify Community →

Hey fellow store owners!

Ever landed on a product page only to be met with a sea of crossed-out colors or sizes, making it feel like everything you want is perpetually unavailable? It's a common frustration, and it's something many of us want to fix on our own Shopify stores. Recently, our community had a fantastic discussion about this very issue, specifically for those of you rocking the Horizon theme.

The original question came from Hervé, a store owner from Paris, who perfectly summed up the problem: his Horizon theme was showing out-of-stock variants as crossed out, but still visible in the selector. He wanted to completely hide them, leaving only the truly available options for a cleaner, less "deceptive" customer experience, especially with products that have a "many many variantes of colors not available" matrix. And honestly, who can blame him? A cluttered product page can really impact a customer's journey.

Why a Clean Product Page Matters

As Hervé pointed out, seeing a bunch of unavailable options can be a bit of a turn-off. It can make a customer feel like they're constantly hitting dead ends, leading to frustration and potentially, them leaving your site. For stores with extensive product lines and numerous variants, minimizing this visual noise is crucial for a smooth shopping experience. A clean selector means customers can quickly see what's actually in stock and make a purchasing decision without unnecessary distractions.

The Community Solution: Hiding Out-of-Stock Variants

While the Horizon theme, like many others, doesn't have a built-in toggle for this, our amazing community quickly jumped in with a solid, code-based solution. Ecom_swift_LLC confirmed that a code change or an app would be necessary, but it was Ploqo who delivered the goods with a super actionable CSS snippet and clear instructions. Hervé tried it out and reported back that it "works perfectly" and would make his "minimalist store style better now." That's the power of community right there!

Step-by-Step: How to Hide Swatch-Style Variants

This method involves adding a small piece of CSS directly into your theme using a Custom Liquid block. It's relatively straightforward, but remember, it's always a good idea to duplicate your theme before making any code changes, just in case!

  1. Open the Theme Editor:
    • From your Shopify admin, go to Online Store > Themes.
    • Find your Horizon theme and click Customize.
    • Navigate to a product page in the editor.
  2. Add a Custom Liquid Block:
    • In the left-hand panel, under Product information > Details, click Add block.
    • Search for "liquid" and select Custom Liquid.

    In Product information > Details, Add block > Custom Liquid

  3. Paste the CSS Code:
    • In the "Custom Liquid" box that appears, paste the following code:

    Paste the code in the Liquid code box, then Save

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

Here's a visual of the transformation:

Before: The out-of-stock colours are crossed out but still shown

Before: the out-of-stock colours are crossed out but still shown

After: The out-of-stock colours are hidden

After: the out-of-stock colours are hidden

What About Dropdown-Style Pickers?

Ecom_swift_LLC brought up another excellent point: if some of your products use dropdowns instead of swatches, the initial CSS snippet won't quite catch those. For dropdown-style variant selectors, you'll want to add this additional rule:

You can combine this with the previous snippet within the same