eg

Search results patterns

The search results page is the catalogue rendered against a query, where retrieval, ranking and merchandising all collide. The pattern depends on catalogue size, whether the audience refines or browses, and how editorial the surface needs to feel.

Commerce default

Faceted sidebar with grid

Filters in a left sidebar, applied chips and sort above the grid, paginated product cards. The dominant search-results pattern across mainstream retail. Treats the SERP exactly like a category page once the query is parsed.

Example of a commerce-default search results page with faceted filter sidebar and gridsearchResults for “winter jacket”1,284 products · sorted by relevanceFiltersclearCategory−Parkas (412)Puffers (286)Wool coats (198)Shells (164)Brand−Patagonia (124)The North Face (98)Arc'teryx (62)Price+Color+Size+Parkas ×Patagonia ×$100-$300 ×Sort: Best match ▾Winter parka 1Patagonia · 4 colors$189.00Winter parka 2Patagonia · 4 colors$249.00Winter parka 3Patagonia · 4 colors$169.00Winter parka 4Patagonia · 4 colors$299.00Winter parka 5Patagonia · 4 colors$219.00Winter parka 6Patagonia · 4 colors$199.00ecommerceguide.com

> what's good

  • +Reuses the same components as category pages, lower engineering cost.
  • +Facet refinement is the strongest known lever for relevance.
  • +Applied-chip row gives shoppers an at-a-glance view of their refinements.

> what's risky

  • ·Sidebar competes with the grid for space, hurts on tablet widths.
  • ·Without query understanding, facets across categories become incoherent.
  • ·Search-specific signals like did-you-mean and synonyms get squeezed in awkwardly.
DTC editorial

Editorial banner with tagged sections

The query opens with a curated banner, often a campaign, and the products group into named sections by category instead of one flat grid. Used by DTC brands where the catalogue is small enough that grouping is more useful than filtering.

Example of a DTC-style editorial search results page with banner hero and tagged sectionssearchEDITORIALThe summer linen editeverything we have for warmer months · 84 stylesshop the edit →Shirts & tops · 28view all →Linen shirt 1$124Linen shirt 2$148Linen shirt 3$98Linen shirt 4$168Trousers · 22view all →Linen trouser 1$148Linen trouser 2$168Linen trouser 3$132Linen trouser 4$188ecommerceguide.com

> what's good

  • +Doubles search into a merchandising surface, not just retrieval.
  • +Section grouping helps shoppers understand what the catalogue covers without filtering.
  • +Banner real estate funds editorial campaigns while keeping search fast.

> what's risky

  • ·Doesn't scale to large catalogues, sections become arbitrary above a few hundred items.
  • ·Editorial copy goes stale quickly without dedicated owners.
  • ·Hides classic sort and filter controls, hurts power-shopper journeys.
Pinterest

Infinite-scroll continuous results

Results stream in as a masonry grid, fetching more on scroll with no pagination. Sticky filter chips at the top let shoppers refine without losing position. Used by visual-discovery surfaces where browsing is the goal.

Example of a Pinterest-style search results page with infinite-scroll continuous masonry gridsearchResults for “coastal living room”auto-loading more as you scroll · 12,840 savesallblueneutralrattanwhite wallssmall spacerentalsLiving room 1Living room 2Living room 3Living room 4Living room 5Living room 6Living room 7Living room 8Living room 9Living room 10loading moreecommerceguide.com

> what's good

  • +Browsing flow stays unbroken, supports long discovery sessions.
  • +Masonry layout handles mixed aspect ratios more elegantly than fixed cards.
  • +Sticky chip filters keep refinement always one tap away.

> what's risky

  • ·Hostile to footers and SEO crawl, every important link sits below an infinite feed.
  • ·Memory and DOM growth becomes a real perf problem past 200 items.
  • ·Hard to deep-link to a specific position, hurts share and back-button UX.

More discovery & browse patterns