logo
Shopify Builds>Primitives>Storefront filtering

Storefront filtering

Definition

Storefront filtering is Shopify's native faceting for collection and search results. A merchant enables filters in the Search & Discovery admin, and the storefront exposes them to the theme as filter objects carrying values, counts and URL parameters. Filter state lives in the query string, so a filtered view is a real, shareable, server-rendered URL rather than a client-side state.

Documented at https://shopify.dev/docs/storefronts/themes/navigation-search/filtering/storefront-filtering.

How we've used it

The facets are Shopify's; the interface almost never is. The same rebuild happens on every storefront. The stock drill-down drawer becomes a persistent sidebar rail on desktop and an in-place accordion on mobile, values that carry a color render as swatches, long value lists get a show-more, and one sort control moves between breakpoints instead of being duplicated. Underneath, the fetch gets hardened: a filter change re-renders the grid section over the Section Rendering API, and our version adds an error path, a page-level loading state and an event other components subscribe to, because promo tiles, review widgets and analytics all have to re-initialize against the new grid. The query string keeps carrying the state, so back, refresh and share still work.

Builds using it

4 further gated builds use it; their pages follow.

Related entities

Section Rendering API · Collection tag permalinks · Storefront search · Predictive Search API

Builds

Collapsible desktop filter sidebar that reflows the product grid instead of squeezing it

Toggling the vertical filter rail switches the collection grid between four columns and three, keeps that choice for the browsing session, and re-applies it every time the facet pipeline replaces the grid wholesale.

LUS Brands

Main collection grid: merchandisable promo tiles, load-more and a filter blocklist

Dawn's collection grid extended in four directions: promo tiles a merchandiser places by grid position, a textarea that suppresses unwanted filter values, load-more over the Section Rendering API, and an infinite-scroll fallback.

Nudestix

Collection page: three filter modes, in-grid promo blocks and infinite scroll

The live collection body here is vendor code from a paid premium theme. This page documents what that code does, how it is configured across a large template set, and where our own contribution to it begins and ends.

Three Ships

Filter-triggered promo cards inside the search results grid

A theme-editor block that puts a merchandiser-designed card into the search results grid at a chosen position, and shows it only while a named facet is active on that query.

Three Ships

Tabbed multi-type search results page with faceted filtering

One query, three kinds of answer: a search section that counts products, articles and pages before it renders any of them, tabs between them, and keeps a set of SKUs out of the grid entirely.

Three Ships

Vertical filter rail and an in-place mobile filter accordion replacing Dawn's drill-down drawer

Dawn's facets snippet was rebuilt into a sidebar rail with color swatches and show-more truncation, an accordion mobile drawer where every group opens in place, and a single sort control that physically relocates between breakpoints.

LUS Brands