Shopify Size Filters Showing Out-of-Stock Variants? Here's How to Fix It!

Hey there, fellow store owners! Ever found yourself scratching your head, wondering why your Shopify collection pages are still showing products with 'Medium' as a filter option, only for customers to click through and find that specific size is completely sold out? You're definitely not alone. This is a super common point of frustration, and it was recently a hot topic in the Shopify community, specifically concerning the popular Impulse theme and Shopify's native Search & Discovery app.

A store owner, Kralc_Bocaj, brought this exact issue to the community. They were seeing products appear in filtered results even when the chosen size was out of stock, and they were looking for a built-in fix or some clear guidance on what to do. The good news? The community rallied, and we've got some solid insights and solutions to share!

Understanding the Core Problem: Product vs. Variant Filtering

So, why does this happen? As several experts in the thread, like Ajaycodewiz and Tim_Tairli, pointed out, it boils down to how Shopify's native filtering engine—including the Search & Discovery app—fundamentally works. By default, Shopify's availability filters operate at the product level, not the variant level.

What does that mean for you? It means if a product has even just one variant in stock (say, a large size t-shirt is available), that product is considered "in stock" overall. So, if a customer filters for "Small," and your t-shirt has a small variant that's out of stock but a large variant that isn't, the product will still show up in the "Small" filtered results. Pretty counter-intuitive, right? There's no theme setting or Search & Discovery toggle that can change this default behavior.

Solution Path 1: The App Route (Reliable but with costs)

For a truly robust, worry-free solution that keeps your product counts and pagination perfectly accurate, the community often points to dedicated third-party search and filter apps. Apps like Boost AI Search & Filter or Globo Smart Product Filter are designed to index your products at the variant level. This means they can genuinely "hide out-of-stock variants" or even "show variants as separate products" if that's what you need. This approach ensures your customers only see what's actually available for the size they've filtered for, and your collection counts update correctly.

However, as Moeed from the community mentioned, while powerful, these apps can sometimes be "messy" or add complexity to your store, not to mention the recurring costs. But if precise filtering and maintaining correct product counts are deal-breakers for you, this is often the most reliable path.

Solution Path 2: The Custom Code Workaround (DIY with limitations)

Now, if you're comfortable with a bit of DIY or have a developer on standby, there's a clever code-based workaround that Ajaycodewiz shared in the thread. This solution works by reading the active size filter and then programmatically hiding any product cards that don't have an available variant in that specific size. It's a great way to visually clean up your collection pages without needing a separate app.

A crucial note here: This code-based solution hides the product cards from view, but it won't update the "N products" count at the top of your collection page, nor will it adjust pagination. Only the visible cards are affected. Keep this limitation in mind when deciding if this is the right approach for your store.

Implementing the Code Fix for Size Filters

If you're ready to give the code a try, here are the steps. Remember, always duplicate your theme before making any code changes!

1. From your Shopify admin, go to Online Store > Themes.

2. Find your active theme, click Actions > Edit code.

3. In the theme editor, navigate to sections/collection-template.liquid.

4. Locate the product loop in this file. You'll want to insert the following code snippet right before your product card renders. The exact line can vary slightly by theme, but it's typically just before where the individual product item (like a

   or similar) starts.

   {%- assign size_opti -%}
   {%- assign size_param = 'filter.v.option.' | append: size_option_name | handleize -%}
   
   {%- assign active_sizes = '' -%}
   {%- for f in collection.filters -%}
     {%- if f.param_name == size_param -%}
       {%- for v in f.active_values -%}
         {%- assign active_sizes = active_sizes | append: '|' | append: v.value | append: '|' -%}
       {%- endfor -%}
     {%- endif -%}
   {%- endfor -%}
   
   {%- if active_sizes != '' -%}
     {%- assign size_pos = 0 -%}
     {%- for opt in product.options_with_values -%}
       {%- if opt.name == size_option_name -%}{%- assign size_pos = opt.position -%}{%- endif -%}
     {%- endfor -%}
   
     {%- if size_pos > 0 -%}
       {%- assign match_in_stock = false -%}
       {%- for v in product.variants -%}
         {%- if v.available -%}
           {%- assign vsize = '' -%}
           {%- if size_pos == 1 -%}{%- assign vsize = v.option1 -%}
           {%- elsif size_pos == 2 -%}{%- assign vsize = v.option2 -%}
           {%- elsif size_pos == 3 -%}{%- assign vsize = v.option3 -%}{%- endif -%}
           {%- assign needle = '|' | append: vsize | append: '|' -%}
           {%- if active_sizes contains needle -%}{%- assign match_in_stock = true -%}{%- endif -%}
         {%- endif -%}
       {%- endfor -%}
   
       {%- unless match_in_stock -%}{%- continue -%}{%- endunless -%}
     {%- endif -%}
   {%- endif -%}
   

   This code snippet works by first identifying the active size filters. Then, for each product, it checks if any of its available variants match the filtered size. If no available variant matches, the {%- continue -%} statement tells Liquid to skip rendering that particular product card.

   Important: The line {%- assign size_opti -%} assumes your size option is named "Size." If your store uses something different (e.g., "Product Size"), you'll need to update this string to match!

   Here's a visual of how this fix can clean up your collection pages:

   Before the Fix:

   

   After the Fix:

   

   As you can see, the product that didn't have the filtered size in stock is now hidden, providing a much cleaner and more accurate shopping experience for your customers.

   Which Path Is Right for You?

   Ultimately, the best path for you depends on your comfort with code, your budget, and how critical those perfectly accurate product counts and pagination are. If you need a fully integrated, robust solution with accurate counts, a third-party app is likely your best bet. If you're okay with a visual workaround that doesn't update the total product count and you're comfortable with (or can hire help for) a bit of code, Ajaycodewiz's solution is a fantastic, free alternative.

   It's a common challenge, but as the community discussion shows, there are definite ways to tackle this. Don't hesitate to reach out to a Shopify Partner or developer if theme code edits feel a bit beyond your comfort zone – getting it right is always worth it for your customers' experience!