Filter a catalog by the variant a shopper can choose

A shopper selects Small and Green. A hoodie should appear only if one of its variants is both small and green. A small navy variant and a medium green variant do not satisfy that request, even though the product has both attributes somewhere in its catalog.

Use the playground below to inspect the exact matching variant IDs behind each product. Its six products and twelve variants are fictional. Availability is a declared sample value, not a live stock check.

Try the combination that should return zero

Select Hoodies, S, Green, and Available. No product matches. Harbor hoodie P01 has V01, a small navy variant, and V02, a medium green variant. Neither satisfies the complete filter.

Keep those filters and add size M. P01 now appears through V02. Selecting S and M means S or M; selecting size and color means the size choice and the color choice must match one variant.

The zero-result state retains the filters. Remove Size S from the original zero-result case and P01 returns through V02, because size is now unrestricted. Reset clears all filters. The aid does not fill an empty result with unrelated popular products.

Count products once and show the matching variants

Select Tees, sizes S and M, Green, and Available. Trail tee P02 has two qualifying variants, V03 and V04. It should create one product card with two matching variants, not two product cards.

Product names are not identities. The fixture also contains a different Trail tee, P06. With no filters, both products appear on page 3. They share a name but retain their own IDs and variants.

Sort the matching products by name and then ID. Count every matching product before splitting the list into pages of two. If you change a filter while on a later page, return to page 1; do not leave the shopper on an empty page beyond the new result set.

Keep unknown availability visible

The example uses three availability values: Available, Unavailable, and Unknown. Selecting Unknown returns Field hoodie P04 through V08 and Ridge sweatshirt P03 through V05. Those variants do not qualify when only Available is selected.

With Available selected alone, seven variants produce five distinct products. That count says how many sample records match the filter. It does not establish that a real item can be reserved, ordered, paid for, or fulfilled.

An empty filter group is unrestricted. Selecting every value in a group gives the same matches, while still showing those explicit selections. In both cases, matching must happen at the variant level before deduplicating product IDs.

Make the answer inspectable

Keep the filter contract beside your build. The source variants expose every fictional row, and the complete answer matrix lists matching product IDs, variant IDs, and pages for all 4,096 combinations. Each of the four filter groups has three possible values, creating eight selected subsets per group, including empty.

The source table and manual method also work without JavaScript. Before using your own catalog, test the split-variant counterexample, two variants belonging to one product, duplicate names, unknown availability, zero-result recovery, and a filter change from the last page. Check keyboard access and narrow screens as well as the numbers.

Bring the catalog contract into a template

Spiritshop is a relevant merchandise-catalog starting point with category, size, and availability controls to inspect. Compare its catalog flow with your own catalog model, then bring the explicit variant rules into the app brief. This example's matching algorithm is not a claim about Spiritshop's implementation.

Replace sample school branding, contact details, and community or proceeds claims with your own verified merchandise offer. Use the Spiritshop remix entry when its starting point fits, and test actual stock, ordering, payment, and fulfillment separately. The app design review covers the broader visual and interaction checks.