Free

Catalog-led commerce

Open with a desired outcome or offer, expose the catalogue as a navigable structure, then make comparison and bundling easy.

Back to page recipes Back to page recipes

Section sequence

6sections, in the order the visitor meets them. Bar height is the section's weight in the page.

How the page argues

1
Lead with the outcome or the current offer, so the catalogue has a reason to be scanned.
2
Expose the catalogue as rails organized by how people shop, not by internal taxonomy.
3
Let filters narrow by the attributes that actually decide the purchase.
4
Preview one item deeply enough to establish quality for the whole catalogue.
5
Make bundling or comparison the bridge from browsing to buying.
6
Keep the shop route present at every level of the hierarchy.

What each section has to be

OrientOffer or outcome: The reason to look: a current offer, a seasonal outcome or a headline value, with its expiry if it has one.
NavigateCatalogue rails: Three to six rails organized the way customers shop: by need, by collection, by moment.
NavigateCategory filters: Filters on the attributes that actually decide a purchase in this category.
DemonstrateItem detail preview: One item at full quality, so the whole catalogue inherits a sense of standard.
ProveBundle or comparison: The bridge from browse to buy: what goes together, or what differs between two candidates.
ConvertShop route: An add or buy action at every level: rail, filtered set and item detail.

Is this the right sequence?

Who it is for

Shoppers and subscribers whose decision is which one, not whether — and who will leave if choosing is hard.

Products it suits

Products sold as a collection, a catalogue or a subscription bundle with real choice architecture.

Not for

A single workflow product with nothing to choose between, where a catalogue invents complexity.

Evidence strategy

Which proof modes carry the page, in the order they land.

Primary: catalogue breadth and quality, judged by browsing.
Secondary: the deep item preview, which sets the quality expectation for everything else.
Tertiary: comparison and bundling, which resolve the choice the breadth created.

CTA plan

What the page asks for, what it offers instead, and where.

Primary: Add or buy the item in view
Secondary: Browse a collection, or compare two candidates
Placement: An action on every card, plus a persistent cart or basket affordance in the header.

Responsive behavior

What the sequence has to do when the viewport stops cooperating.

Rails scroll horizontally with visible edge affordance and a see-all link that opens the full category.
Filters become a bottom sheet that preserves scroll position and shows the applied count.
Item imagery keeps its aspect ratio and quality; density gives way to fidelity on small screens.

Anti-patterns

The failure modes that make this sequence stop working.

Rails named after internal categories, which forces the shopper to learn the taxonomy.
Offer-first messaging with no quality proof, which trains the visitor to wait for discounts.
Filters that reload the page and lose scroll position.
A catalogue with no comparison or bundle bridge, leaving breadth as an unresolved decision.

Build spec

What an agent needs in order to build Catalog-led commerce: what each section must contain, the copy rule that keeps it honest, the slots to resolve from your product, and the order to build in.

Section specs

1.
Offer or outcome
- Offer or outcome statement
- Conditions
- Expiry date if applicable
Copy rule: State the condition and the end date in the same block as the offer.
2.
Catalogue rails
- Three to six rails
- Customer-language rail names
- See-all link per rail
- Real item imagery
Copy rule: Name rails by shopping intent ('for cold weather'), not by internal category codes.
3.
Category filters
- Three to six decisive attributes
- Applied-filter chips
- Live result count
- Scroll-preserving behaviour
Copy rule: Filter on what decides the purchase, not on every attribute in the catalogue.
4.
Item detail preview
- High-fidelity imagery
- Price and availability
- Key specifications
- One review or provenance detail
Copy rule: Give the item enough detail to set the standard for the whole catalogue.
5.
Bundle or comparison
- Bundle composition or two-item comparison
- Price delta
- What differs materially
Copy rule: Name the material difference, not every differing field.
6.
Shop route
- Add or buy per card
- Persistent basket
- Stock or availability state
Copy rule: Show availability on the action itself.

Content slots

activeOffer: The current offer or seasonal outcome, with conditions and expiry.
railStructure: Rails named in customer language, with their item sets and see-all targets.
decisiveAttributes: The attributes that actually decide a purchase in this category.
flagshipItem: One item with full imagery, specifications and provenance for the deep preview.
bundleLogic: Which items combine, at what price delta, and why.

Build order

Structure rails from real shopping behaviour before writing any copy.
Build the item card, then the rails around it.
Add filters limited to decisive attributes, with scroll preservation.
Build the flagship item preview at full fidelity.
Add the bundle or comparison bridge, then wire actions at every level.

QA checks

Every rail name is language a customer would use.
Filters preserve scroll position and show an applied count.
Price and availability appear on every card.
The flagship preview shows at least three real specifications.
An add or buy action exists at rail, filter and detail level.

Agent tags

The vocabulary an agent matches this recipe on.

catalogue-rails
offer-strip
category-filters
item-preview
bundle-compare