The Collection page opens when a shopper clicks a collection. Its main section, Collection products, shows the products in that collection as a grid of cards. It is required on this page.
Where to find it
- Open the builder and choose Collection page in the Pages tab.
- Pick a collection to preview. This only changes the preview: one design is used for all your collections.
- Click Collection products.
Section settings
- Section width: Page or Full.
- Columns: 1 to 8 cards per row on desktop.
- Mobile columns: 1 or 2 cards per row on phones.
- Color scheme, Gap between cards, padding, and Custom CSS.
Blocks
- Product card: how each product looks. It is required and cannot go inside a group. See Product and collection cards.
- Text (up to 2), Divider (1), and Group (1): place them above or below the grid.
Show the collection name and description
Because one design serves every collection, Text blocks in this section can show live values. Type them in the text:
{{collection_name}}: the name of the collection being viewed.{{collection_description}}: its description.{{products_count}}: how many products it has.
A new collection page starts with a heading that shows {{collection_name}}. For example, write "{{collection_name}}: {{products_count}} products". The name and description come from the collection itself, see How do I organize products into collections?
How products are listed
- The newest products of the collection come first.
- The first products load with the page, and a show more button under the grid loads the next ones.
- Hidden products are left out.
Common tasks
- Show the description under the title: add a second Text block with
{{collection_description}}and drag it under the heading. - Bigger cards on desktop: lower Columns, for example from 4 to 3.
Other sections for this page
Add Sub collections to show the child collections of the one being viewed, for example "Shirts" and "Trousers" inside "Men". See Sub collections section. You can also add any section allowed on every page, such as an image banner or FAQ.
The page that lists all your collections at example.com/collections is a different page, the Collections page. See Which store pages can you edit in the builder?
Troubleshooting
- A variable shows as plain text: check the spelling and the double braces. The variables only work in Text blocks of this section.
- A product is missing: check that it is published, not hidden, and added to that collection.
- Every collection shows the same title: you typed a name in the heading. Replace it with
{{collection_name}}.