Faceted filtering
Sidebar filters that narrow a product grid by attribute, each showing how many products it would leave behind.
See it
What it is
A facet is one attribute (Size, Color, Brand, Price) broken into selectable values, each carrying a count of how many products it would leave. The counts are the whole point: they are recalculated against the current result set, so the sidebar tells you where the products are before you click. Search engines like Algolia, Typesense, and Elasticsearch compute them as aggregations.
The combination logic trips people up. Values inside one facet are OR (small or medium), facets combine with AND (small or medium, and blue, and under $50). Getting this backwards produces a filter that returns nothing the moment someone ticks two boxes.
Gotcha: dead ends and crawl explosion. Disable or hide zero-count values so nobody clicks into an empty grid, and keep filter state in the URL so a filtered view is shareable and back-button friendly. But a URL per combination means thousands of near-identical pages, so canonicalise or noindex all but the handful of filter combinations you actually want ranking.
Ask AI for it
Build a faceted filter sidebar for a product grid. Facets: Size (checkboxes), Color (swatch checkboxes), Brand (checkboxes with a search box once there are more than 10), and Price (a min/max range slider). Show a live result count beside every value, OR values within a facet and AND across facets, and disable zero-count values instead of removing them. Put every active filter in a row of removable chips above the grid with a 'Clear all' link, mirror the whole state in URL query params, and on mobile collapse the sidebar into a bottom sheet with a sticky 'Show 42 results' button.