Mastering Shopify Filters: How to Hide Out-of-Stock Variants on Collection Pages

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. This limitation can significantly impact user experience, leading to customer frustration and potentially lost sales.

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

For a truly robust, worry-free solution that keeps your product counts and pagination correct, integrating a third-party variant-level filter app is often the most recommended path. These apps are specifically designed to overcome Shopify's native filtering limitations by indexing your products and their variants at a much deeper level.

How Third-Party Filter Apps Work:

• Variant-Level Indexing: Unlike Shopify's default, these apps can track the availability of each individual variant (e.g., 'Small Red T-shirt' vs. 'Large Blue T-shirt').
• Accurate Filtering: When a customer filters for "Small," the app will only display products that have an available 'Small' variant.
• Enhanced Features: Many come with additional benefits like advanced search, merchandising tools, and analytics.

Apps like Boost AI Search & Filter or Globo Smart Product Filter are excellent examples that can index at the variant level. When evaluating these, look for features such as "show variants as separate products" or "hide out-of-stock variants." While there's a recurring cost associated with these apps, they provide a comprehensive and scalable solution, ensuring your customers always see accurate product availability, which is crucial for a smooth shopping experience on any Shopify store.

Solution Path 2: Custom Theme Code (For the Adventurous Developer)

If you're comfortable with theme code modifications or have access to a developer, a custom Liquid code snippet can provide a free alternative to hide products that don't have the filtered size in stock. Ajaycodewiz shared an effective solution in the Shopify community thread that can be applied to themes like Impulse or Dawn.

Understanding the Code & Its Limitations:

This method works by iterating through each product in your collection loop and checking if any of its available variants match the currently active size filter. If no available variant matches, the product card is simply skipped (hidden) from the display.

Key Considerations:

• "N products" Count: The total product count displayed (e.g., "Showing 10 of 50 products") will not update, as the filtering happens on the display layer, not the underlying collection data.
• Pagination: Pagination might also be inaccurate, as it's based on the original collection size.
• Developer Skill Required: Incorrect implementation can break your theme. Always back up your theme before making any changes!
• Specific to 'Size': The provided code is tailored for a 'Size' option. Extending it to other filters (e.g., 'Color') would require further customization.

The Liquid Code Fix:

You'll need to add this code inside the product loop in your sections/collection-template.liquid file, right before the product card renders. For Impulse theme users, this file might be named slightly differently or be part of a larger section, so a developer's eye is recommended.

{%- 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 -%}

Note: Remember to replace 'Size' with the exact name of your size option if it's different.

Which Solution is Right for Your Shopify Store?

The choice between an app and custom code depends on your specific needs, budget, and technical comfort level:

• For a seamless, scalable, and feature-rich experience with accurate counts and pagination: Invest in a dedicated third-party filtering app. This is ideal for growing stores with complex inventories or those who prefer a hands-off approach to development.
• For a cost-effective solution to hide out-of-stock sizes, accepting minor display limitations: The custom Liquid code is a viable option. This suits smaller stores, those with specific development resources, or merchants who only need to address the size filter and are aware of the pagination/count caveats.

At Shopping Cart Mover, we understand the nuances of Shopify development and migrations. Whether you're looking to implement advanced filtering, migrate your store, or simply optimize your current setup, our team of experts is here to help you navigate these complexities and ensure your customers have the best possible shopping experience.

Conclusion

While Shopify's native filtering system has its limitations, particularly when it comes to variant-level availability, merchants are not without options. By understanding the core problem and exploring both app-based and custom code solutions, you can significantly improve your store's user experience, reduce customer frustration, and ultimately boost your conversion rates. Choose the path that best aligns with your business goals and technical capabilities, and watch your customers enjoy a more precise and satisfying shopping journey.