Video-first · 5 captures · 1 stores
Collections Index patterns
The collections index: how brands curate the catalog into shop-all tiles that route browsing shoppers into the right listings. Every example below is a real, looping capture from a live storefront, not a mockup or a screenshot.
About the collections index pattern
What it is
The collections index, often labeled "shop all" or "collections", is the grid of collection tiles that sits between the homepage and the individual listing pages, acting as a visual table of contents for the catalog. Each tile is a curated grouping (a category, a season, a campaign, a collaboration) with its own cover image, and the page as a whole is where a store presents its assortment as a set of deliberate edits rather than one long product wall.
Why it matters for conversion
For the large share of shoppers who would rather browse than type a query or dig through nav, this page is the fastest way into the assortment, and the curation on it steers what they discover. Leading with the right collections nudges average order value and full-price sell-through by pointing shoppers at merchandised stories (new arrivals, a seasonal edit) instead of leaving them to stumble through categories, which is why the ordering and imagery here are a real merchandising lever, not just a directory.
What to look for
A well-built collections index pairs evocative, consistent cover imagery with unambiguous labels, orders tiles by what's most timely (new and seasonal first, evergreen behind), and mirrors the navigation closely enough that a shopper is never surprised by what exists. It should read as curated, a considered set of entry points, rather than an automated dump of every collection the CMS happens to contain, and it should degrade to a clean single-column scan on mobile.
Common variations
Lifestyle and apparel brands foreground editorial and seasonal edits plus campaign tiles, treating the page almost like a lookbook cover. Larger catalogs organize the index by department so it doubles as a top-level map. Some tightly-focused DTC brands skip a dedicated collections index altogether, relying on navigation and homepage rails instead, since a handful of collections don't warrant their own page.
Brand palettes in this gallery
The exact colors these collections index screens are built from, sampled from each live storefront.
Watch every collections index flow, looping
The whole library is free to browse. Pro pipes these patterns straight into your AI tools over MCP.
Free to browse · Pro unlocks the MCP