Filter Showing Out of Stock Sizes - Dawn Theme

Store Design
, ,

Topic summary

Users report that Shopify’s Search & Discovery app displays products in collection filters even when specific sizes are out of stock, creating poor user experience when customers discover unavailability only on product pages.

Proposed Solutions:

  • Shopify Flow automation: Use Flow to dynamically add/remove tags or metafields based on inventory changes, ensuring filters only show in-stock variants. One user shared a Flow setup using Liquid code to update product metafields when inventory quantities change.

  • JavaScript modification: Modify the createSearchParams function in facets.js (or theme.js for some themes like Focal) to automatically append the availability filter (filter.v.availability=1) when size filters are active. This forces the system to show only in-stock items.

  • CSS hiding: Use JavaScript to check the in-stock filter by default on page load, then hide it with CSS if desired.

  • URL parameter workaround: Append ?filter.v.availability=1 to collection URLs by default using Shopify’s string filters.

Current Status:

No native solution exists within Search & Discovery. Shopify support has confirmed they have no built-in fix for this issue. Multiple users express frustration that such basic filtering functionality requires custom code or third-party apps. The discussion remains active with users seeking simpler, non-technical solutions.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
22

A version of this code worked for me. You may need to look in the assets/theme.js file for the facets.js code. In the Focal theme, for instance, it looks something like this:

const formData = new FormData(this.querySelector("#facet-filters-form"));

const searchParamsAsString = new URLSearchParams(formData).toString();

triggerEvent(this, "facet:criteria-changed", { url: `${window.location.pathname}?${searchParamsAsString}` });

and I changed it to this:

const formData = new FormData(this.querySelector("#facet-filters-form"));

let newSearchParams = new URLSearchParams(formData).toString();
if (newSearchParams.includes("filter.v.option") && !newSearchParams.includes("filter.v.availability")) {
newSearchParams = newSearchParams + "&filter.v.availability=1"; }
triggerEvent(this, "facet:criteria-changed", { url: `${window.location.pathname}?${newSearchParams}` });

Try searching for “facet-filters” within the theme’s javascript files to find it.