De-clutter Your Shopify Horizon Product Pages: How to Hide Out-of-Stock Variants

Hey there, fellow store owners! Let's talk about something that can really make or break a customer's experience on your product pages: those pesky out-of-stock variants. You know, the ones that are crossed out but still hanging around in your size or color selectors?

Recently, a thread popped up in the Shopify community that really resonated with me, started by Hervé from Paris (shout out to lelongdelajambe!). He was using the Horizon theme and, like many of you, wanted a cleaner look for his product pages. His variants were set to "DENY" (meaning they wouldn't let customers add out-of-stock items to their cart), but they still showed up as crossed-out options. Hervé's goal was simple: completely hide unavailable variants, so customers only see what’s actually ready to ship.

And honestly, who can blame him? As Hervé put it, with "many many variantes of colors not available," it can feel "deceptive for the customer to see all impossibilities." It clutters the page, can lead to frustration, and doesn't exactly scream "minimalist store style."

The Challenge: Horizon Theme's Default Behavior

As Ecom_swift_LLC and Ploqo pointed out in the discussion, the Horizon theme, by design, doesn't have a built-in toggle to completely hide these out-of-stock options. Shopify's default variant picker intends to show all variants, simply marking unavailable ones as disabled. While this can sometimes be useful (as Ecom_swift_LLC noted, it signals that the product exists in that option, potentially prompting a "notify me when available" sign-up), many merchants prefer a cleaner interface.

So, what's the solution when there's no easy switch? The community came through with a fantastic, straightforward code snippet that you can implement yourself!

The Community-Approved Fix: Hiding Variants with Custom Liquid

Ploqo shared a super helpful method that involves adding a small CSS snippet via a Custom Liquid block. Hervé tried it and confirmed, "works perfectly!" This approach is fantastic because it's free, relatively easy, and keeps your product pages looking sharp.

Step-by-Step Guide to Hiding Out-of-Stock Variants

Here’s how you can implement this on your Horizon theme:

1. Open the Theme Editor:
   • From your Shopify admin, go to Online Store > Themes.
   • Find your Horizon theme (or the theme you're working on) and click Customize.
   • Once in the editor, navigate to a product page.
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.

   

3. Paste the Code and Save:
   • In the new Custom Liquid block, paste the following code:

   • Click Save in the top right corner.

   

And just like that, your product page should look much cleaner! Here’s a visual of the "before" and "after" from the thread:

Important Considerations and Advanced Tips

While this CSS trick is great, Ecom_swift_LLC brought up some really important points that are worth keeping in mind:

• Dynamic Hiding: The beauty of this solution is that Horizon's variant picker is smart. It re-checks stock when a shopper switches options, so a color that's out of stock for one size will magically reappear if it's available for another size. Only truly unavailable combinations are hidden for the selected options.
• Dropdown Selectors: If your product pages happen to use dropdown-style variant pickers instead of swatches (or a mix), you'll need an additional rule. Ecom_swift_LLC suggested this snippet to hide those options:

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

• Browser Compatibility: The :has() CSS selector, which this solution relies on, needs a reasonably modern browser (Chrome 105+, Safari 15.4+). On older browsers, the rule is simply ignored, and you'll fall back to the crossed-out swatches, so nothing breaks, it just won't be hidden. Most of your customers will be on modern browsers, but it's good to know!
• Permanent vs. Temporary: This CSS is for presentation only. If a variant is permanently discontinued rather than just temporarily out of stock, it's generally better to delete it from the product (or split it into its own product if it's a major variation). Otherwise, search engines and any apps reading your variant data might still surface it, which can cause confusion.
• Direct Links: Always test direct links to sold-out variants after implementing this. Horizon might still preselect them, even if hidden.

Taking it a Step Further: Hiding Entire Option Rows

Hervé even raised a great follow-up question: "Would it be possible to hide the size button itself when all colours are out of stock for that size?" This is a fantastic point for a truly minimalist experience! The CSS provided focuses on individual variant options (like a specific color swatch). Hiding an entire option row (like the "Size" selector) when all its sub-options are unavailable is a more advanced customization that would likely require deeper Liquid code edits, not just CSS. It's definitely a "next level" refinement to aim for if you're comfortable diving further into your theme files.

Making your product pages as clear and user-friendly as possible is always a win for your customers. Whether you're just starting your Shopify journey or looking to optimize an existing store, these small tweaks can make a big difference. This community discussion really highlighted how a simple CSS trick can dramatically improve the shopping experience, reducing clutter and guiding customers straight to what they can buy.

Remember to always duplicate your theme before making any code changes, just in case! Happy customizing!