Every DTC Shopify store ships with collection pages, and most of them work fine up to about 50 products. Past that, the default Shopify collection template starts leaking conversions quietly. The shopper lands on a collection, sees 82 products, and has no way to narrow down. They scroll, get overwhelmed, and leave. The merchandising team adds a "Shop by type" submenu. The problem moves but does not go away.
Collection filtering is where most mid-catalog DTC stores lose their long-tail conversion, and it is usually invisible in the analytics because bounced shoppers on a collection page do not generate a useful signal. This is a pattern library for the filtering UX that scales, written for Shopify themes in 2026.
The 50-product inflection
At 20 products, no filters. At 40, maybe sort options. At 50-plus, filtering becomes a conversion surface, not a nav convenience. The inflection is not exactly at 50; it depends on category diversity. A coffee brand with 50 single-origin SKUs needs filters (origin, roast, brew method). A t-shirt brand with 50 designs in three sizes needs filters (size, color, sleeve). A supplement brand with 50 formulas needs filters (goal, ingredient, form).
The signal that the default collection template is past its scale:
- Shoppers land on the collection and bounce at meaningfully higher rates than PDP traffic
- The merchandising team keeps creating sub-collections to help shoppers "shop by X"
- Sort options (price low-to-high, best-selling) are being used heavily, which suggests shoppers cannot find what they want any other way
- Search traffic to PDP spikes because shoppers give up on the collection and search instead
At that point, the filter layer has to exist and has to work on mobile.
Mobile filter patterns that hold up
The mobile filter pattern that works in 2026 is the filter drawer: a slide-in panel from the bottom or side, with all filter facets listed, and an apply button that updates the collection grid. Specifics:
- Facets are grouped and collapsible. Size, color, price, category, brand, each in its own section. The shopper expands only what they care about.
- Selected facets stay visible. Chips at the top of the grid show active filters, tappable to remove. Nothing is worse than a shopper forgetting they have a $20-50 price filter active and thinking the store has no other products.
- Apply button is sticky at the bottom of the drawer. Not buried. The shopper sees their selection count and a clear apply action.
- Filter state persists across page loads. If the shopper navigates into a PDP and back, the filter selection should survive. URL query parameters are the right mechanism.
- "Clear all" is a visible action. Both inside the drawer and on the main grid, easy to reach.
The pattern that does not hold up:
- Inline filter sidebar on mobile. Desktop-only filter UI that gets crammed into a mobile collapsible "filter by" accordion. Unusable on a phone.
- Filters that reload the entire page on every click. Each facet tap should update the grid with minimal network cost. On Shopify, this means using the native
Shopify.queryParamspattern or a thin AJAX layer. - Modal overlays that break scroll lock. Same problem as broken cart drawers. The filter drawer has to handle body scroll lock cleanly.
“A collection with 80 products and no filters is not a collection, it is a wall. Shoppers see the wall and leave.”
The facet hierarchy
Not all filter facets are equal. The facets that matter depend on category, but the priority hierarchy is consistent:
- Category or type. The broadest cut. For a beauty brand, "skincare / hair / body". For apparel, "tops / bottoms / accessories".
- Size or fit. The variant that changes whether the product is relevant at all.
- Color or visual style. The variant shoppers scan by.
- Price range. Less important than most themes suggest, but still surfaces a real budget filter.
- Brand or sub-line. For multi-brand stores only.
- Attribute facets. Ingredient, material, feature. Category-specific.
- Availability. "In stock only" toggle. Default on for most stores.
The mistake I see most often is showing all seven at equal weight. The correct pattern is to prioritize the top three by category, put them at the top of the filter drawer, and either collapse or hide the rest behind a "more filters" expand.
The merchandising collection trap
Merchandising teams often solve the filtering problem by creating more collections. "Best sellers". "Under $30". "New arrivals". "Gifts for dads". Each one is a hand-curated or rule-based subset of the main catalog.
This works up to a point and then it becomes a maintenance problem. The merchandising team has to keep 18 sub-collections updated. The navigation grows. Shoppers do not know which collection to start from. And the filters within each sub-collection still have to work, so the problem is not actually solved.
The distinction that matters:
| Collection type | Purpose | Filter behavior |
|---|---|---|
| Merchandising collection | Editorial curation, "Best sellers", "Gifts under $30" | Light filtering or none; the collection itself is the filter |
| Filterable collection | Full category browse, "All skincare", "All tops" | Full filter drawer; primary discovery surface |
| Smart collection | Rule-based auto-populated subset | Filter availability depends on merchandising intent |
Themes that blur this distinction end up with collections that are half-editorial and half-catalog, with inconsistent filter UX. Separating them in the theme (and communicating the difference to the merchandising team) is the durable fix.
Shopify Search and Discovery
Shopify's native Search and Discovery app has grown up in 2024-2026 and now handles the filtering UX natively on most modern themes. For DTC brands under 200 SKUs, Search and Discovery with the theme's built-in filter integration is usually enough. The filter metaobjects, synonym configuration, and boosting rules cover most merchandising needs.
For brands past 200 SKUs or with complex attribute-based filtering needs (technical products, regulated categories, or multi-brand catalogs), a third-party search and filtering provider starts to pay off. This is a judgment call that I cover in search experience for DTC catalogs, which walks through when to stay native and when to invest.
Collection grid density on mobile
A quiet pattern that moves the conversion number: grid density. On mobile, the default Shopify grid is often two columns. For some categories (apparel, beauty), that is correct. For others (supplements, hard goods), a one-column grid with more product information per card performs better.
The test is whether the shopper can make a decision from the card or needs to tap through to the PDP. If they need to tap through, two columns is fine; the card is a preview. If the card can stand alone (clear image, price, one-line descriptor, add-to-cart), one column performs better because the bigger tap target converts more clicks to actual PDPs.
This is not a universal rule; it is a test worth running. Brands that default to two columns for everything miss a real conversion lift in categories where the card can do more work.
Where this fits in the hub
Collection filtering sits in the discovery layer, between landing surfaces (homepage, ad traffic, email) and the PDP. For brands running into the search-versus-filter tradeoff, search experience for DTC catalogs is the adjacent decision log. For PDP-level patterns after the shopper gets through the filter, PDP patterns that actually convert on mobile in 2026 is the next layer. The full set lives in the mobile-first DTC conversion pattern library hub.
At what catalog size does collection filtering become necessary?
Around 50 products is the common inflection. Under that, good sort options and clear category structure handle it. Past that, shoppers need facet filters (size, color, price, category) to narrow the selection without scrolling indefinitely.
Should the filter UI be a drawer or a sidebar on mobile?
Drawer, always. A slide-in panel from the side or bottom, triggered by a "Filter" button on the collection grid. Desktop-style sidebars do not fit mobile viewports and fall over as soon as the catalog grows.
Does Shopify Search and Discovery handle filtering natively?
Yes, for most DTC brands under 200 SKUs. The filter metaobjects, synonym configuration, and boosting rules are sufficient. Past 200 SKUs or with complex attribute filtering, a third-party provider starts to pay off.
How many facets should the filter drawer show by default?
Three to four, matching the top of the facet hierarchy for the category. Collapse the rest behind a "more filters" expand. Showing all seven at equal weight is the most common mistake.
Should I use merchandising collections or filterable collections?
Both, but keep them separate and consistent. Merchandising collections are editorial curation ("Best sellers", "Under $30") with light or no filtering. Filterable collections are full category browse surfaces with the full filter drawer. Blurring the two creates inconsistent filter UX.
The reference theme
The DTC Theme Starter ships a mobile filter drawer pattern with collapsible facets, URL-based state, and the merchandising-versus-filterable collection distinction baked into the theme. It is the reference implementation for brands crossing the 50-product inflection.
Sources and specifics
- Shopify Search and Discovery is Shopify's native app for filter metaobjects, synonyms, and boosting. GA since 2022, with expanded capabilities in 2024-2025.
- The 50-product inflection is a working heuristic from DTC Shopify builds; it is not a published Shopify threshold.
- Facet hierarchy priority is based on e-commerce UX research and observed shopper behavior in merchandising tools, consistent across Baymard Institute and internal DTC analytics reviews.
- Filter drawer scroll-lock handling on mobile uses the same approach as cart drawer scroll-lock (body overflow hidden plus a dedicated scroll container inside the drawer).