Ecommerce filter patterns
Filters do the heavy lifting between catalogue and conversion. The decision splits roughly into a permanent accordion sidebar, a chip-led applied-filter view that surfaces what's been picked, or a mobile-style drawer that hides filters until requested. The right pattern depends on catalogue depth, attribute richness, and how much of the audience is on mobile.
Collapsible accordion sidebar
A persistent left sidebar with stacked accordion sections, one or two expanded by default. Counts beside each option help shoppers see what's worth filtering. Common across mid-market fashion and home retailers.
> what's good
- +Always visible, low interaction cost to refine results.
- +Counts beside each option set realistic expectations before clicking.
- +Accordions handle long attribute lists without overwhelming the viewport.
> what's risky
- ·Permanent sidebar steals horizontal space from product imagery.
- ·Long lists of options collapsed by default still feel intimidating to first-time visitors.
- ·Mobile rendering needs a separate pattern, this layout doesn't translate.
Faceted with applied-filter chips
A horizontal row of chips above the grid shows what's been applied, each with an X to remove. The sidebar below offers further attributes. Common on marketplaces and electronics where attribute density is high and shoppers iterate filters often.
> what's good
- +Applied state is unmissable, easy to undo a single filter without resetting everything.
- +Encourages iterative refinement, shoppers can mix-and-match without losing track.
- +Clear all is one click away, reducing the cost of trying combinations.
> what's risky
- ·Two filtering UIs (chips + sidebar) means two places to learn and maintain.
- ·Chip rows can wrap awkwardly on narrow screens and look chaotic.
- ·Visual clutter increases when many filters are applied, drowning out the actual results.
Slide-out filter drawer
A Filter button reveals a full-height drawer over the grid. Each filter category drills into its own panel. The Apply CTA at the bottom commits the change and closes the drawer. Default on mobile, increasingly common on tablet and even desktop.
> what's good
- +Maximises product imagery on listing pages, filters only appear when wanted.
- +Drill-down panels handle deep attribute trees without cramming everything into one view.
- +Single pattern works across breakpoints, simplifies the responsive design system.
> what's risky
- ·Hides filters behind a button, hurting discoverability for casual browsers.
- ·Each filter change requires a round-trip through the drawer, friction adds up fast.
- ·Common to forget the result count on the Apply button, shoppers commit blind.