Collections and filters
The collection page
The collection template has two sections: a Collection banner and Collection products. Because they are separate, you can add anything you like between them or after them.
Collection banner
| Layout | Result |
|---|---|
| Text only | The collection title and description, with no image |
| Image above text | The collection image, then the title |
| Text over image | The title set into the collection image |
| Centered text | Title and description centered |
The banner uses the collection image and description you set in the Shopify admin. It can also read from collection metafields, so a seasonal collection can carry its own banner image and introduction. See Advanced.
Collection products
Products per row, products per page, and the filter layout are set once in Theme settings > Collection pages, so every collection behaves the same way.
Choosing a collection template
Atelier ships four collection templates. Assign one per collection in the Shopify admin, under Theme template.
| Template | Grid | Suits |
|---|---|---|
collection | Three across, uniform, plain heading | Most collections |
collection.editorial | Two across, staggered, over a full-bleed banner, with an introduction and a closing story | A seasonal drop |
collection.campaign | Three across with every fifth product taking two columns, and a full-width campaign break | An image-led collection |
collection.dense | Four across, square images | Accessories and long catalogues |
Create your own from the template picker at the top of the theme editor. The grid is controlled by three settings on the Collection products section:
| Setting | Options |
|---|---|
| Products per row on desktop | Use theme setting, 2, 3, 4 |
| Grid style | Uniform, staggered, mixed sizes |
| Image shape | Use theme setting, adapt, portrait, square, landscape |
Staggered drops alternate columns the way a printed spread does. Mixed sizes lets every fifth product take two columns, which breaks up a long catalogue without a separate section. Anything left on Use theme setting follows Theme settings > Collection pages.
Filtering and sorting
Filters come from Shopify's own storefront filtering. Install the free Search & Discovery app from Shopify and set up your filters there. They then appear automatically.
Choose where filters appear in Theme settings > Collection pages > Filter layout:
- Drawer puts them behind a Filter button. Best for phones and for stores with many filters.
- Sidebar keeps them visible beside the products on a desktop.
Sorting is always available when the collection has more than one sort option.
Filtering updates only the product grid, so the page keeps its position. Active filters appear as removable pills above the grid, with a Clear all link. If a visitor has JavaScript switched off, the same form still works as a normal page load.
Empty collections
A collection with no products, or a filter combination with no matches, shows a message and a link to clear the filters rather than an empty page.