AgentReadyAI visibility appCaffeine & CommerceShopify agency
Caffeine and Commerce
Caffeine and Commerce
By Dylan HuntApril 22nd, 2026shopifymerchandisingliquid

How to Filter by Size In Stock on Shopify Collection Pages (2026 Update)

How to Filter by Size In Stock on Shopify Collection Pages (2026 Update)

This guide is fully updated for 2026 and Online Store 2.0. When the original version was written, Shopify had no built-in way to filter a collection by which sizes were in stock, so the trick was to tag every product by size and lean on the old tag-based URL filtering with a bit of jQuery. That approach is now obsolete: themes no longer ship jQuery, tag-based collection filtering has been replaced, and Shopify filters by variant availability natively. Here is the current, far simpler way.

The short version

Shopify can do this out of the box now. Turn on the Availability filter and the Size option filter in Search & Discovery, and shoppers can narrow a collection to the sizes that are in stock without you tagging anything or writing any code. Most stores need nothing beyond that.

The easy way: native variant filters (recommended)

  1. Install Shopify's free Search & Discovery app (made by Shopify) if it is not already on your store.
  2. Open Search & Discovery → Filters.
  3. Add the Availability filter. This gives shoppers an "In stock" toggle.
  4. Add a filter for your size option (often Size, sometimes a custom option name). Shopify reads it straight from your variants, so there are no tags to maintain.
  5. Save. On a modern theme (anything Online Store 2.0, including Dawn) the filters appear on every collection page automatically.

Now when a shopper selects In stock and a size, Shopify shows only the products that have that size available. Because it filters on real variant inventory, out-of-stock sizes drop out on their own. No size tags, no product-by-product tagging, no script.

You can even link straight to a filtered view. The filters are plain URL parameters:

/collections/all?filter.v.availability=1&filter.v.option.size=Medium

That URL shows every in-stock Medium in the collection, which is handy for ads, email, and internal merchandising links.

Why the old tag method is gone

If you are maintaining the old approach, here is why it is worth retiring:

  • No more jQuery. Online Store 2.0 themes do not load jQuery, so the original script silently does nothing on a current theme.
  • Tag filtering was replaced. Shopify moved collection filtering from the old /collections/handle/tag and current_tags system to native, variant-aware storefront filters. The new system understands inventory, the tag system never did.
  • No tagging chore. The most painful step before was tagging every product with its sizes. Native filters read variants directly, so that entire job disappears.

If you need custom behavior

Native filters cover the vast majority of stores. A few teams still want something the standard filter set does not do, for example a single combined "size in stock" control with bespoke styling, or hiding a product card entirely when the chosen size is sold out rather than relying on the filter result.

That is doable in an Online Store 2.0 theme, but it is genuine theme development: you read the variant data in the collection section (usually card-product.liquid or your product card snippet), respect the active filter.v.option.* parameters Shopify puts in the URL, and render with vanilla JavaScript rather than jQuery. It is very store-specific, so there is no one snippet that drops in cleanly across themes.

If that is where you are headed, we build custom Shopify collection and filtering experiences. Tell us the exact behavior you want and we will build it on your theme.

The takeaway

What used to take product tags, a Liquid loop, and a jQuery script is now a few clicks in Search & Discovery. Turn on Availability plus your size option filter, and shoppers get an accurate, in-stock-only size filter with zero maintenance. Only reach for custom code when you need behavior the native filters genuinely cannot express.

Make your store agent-ready

Get found and recommended by AI shopping assistants.

AgentReady adds Schema.org structured data, an llms.txt directory, and an AI-readability audit to your Shopify store, so ChatGPT, Perplexity, and Google can understand and recommend your products. Free for stores under 500 products.

Comments

Every comment here comes from a verified email. Write yours, confirm from your inbox, and it's live.

Loading comments…

Leave a comment

ShareXLinkedInFacebook

Written by Dylan Hunt, Founder, Caffeine and Commerce. We build Shopify stores that rank and that AI agents can read. Have a project? Get in touch.