Shop Collection Template
Browse the whole range.A collection page: a typographic hero over a masonry gallery and an index list, a featured product story and a split CTA — styled entirely by your tokens.
When to use this template
A collection page has to make browsing effortless — a whole range readable without hunting.
This one is dressed in Shop copy and runs 7 sections, opening on the Vista navbar and closing with the Anchor footer. In between it covers hero, gallery and content.
At a glance
- Page type
- Collection
- Business
- Shop
- Sections
- 7
- Section types
- 6
- Design tokens
- Colour, Radius, Shadow, Spacing, Typography
- Requires JS
- No
- Price
- Free
7 sections in this page
Every section below is a real, responsive layout rendered in your own design tokens — not a screenshot. In page order:
-
1
Vista
NavbarLogo on the left, the inline nav centered, and a call to action on the right.
-
2
Mural
HeroCentered copy standing on a drawn horizon line that runs full width along the bottom edge.
-
3
Mosaic
GalleryA masonry wall of image tiles at varied crops, each captioned beneath.
-
4
Index
GalleryA text-forward, image-free index — each row a numbered entry with a title, caption and meta column.
-
5
Feature
ContentAn editorial feature — one large hero image spanning the width, with the story following in text columns.
-
6
Split
Call to actionA horizontal call to action — heading and subcopy on the left, a solid and a ghost button on the right.
-
7
Anchor
FooterA minimal centered footer — a wordmark, one wrapping nav row, a divider, then copyright and social buttons.
Shop Collection template FAQ
Common questions about Shop Collection — how it compares with Shop Home, which of its 7 sections you can drop and where the sample copy in the preview comes from.