Collection page and filters
The collection page has two sections: the Collection banner with the title, description and image, and the Product grid with filters, sorting and pagination. Filters come from Shopify's Search & Discovery app.
Before you start
Install Shopify's Search & Discovery app and choose your filters there: availability, price, product type, vendor, options and metafields.
How to set it up
Step 1: Open the collection template
- In the theme editor, use the page picker to choose Collections > Default collection.
- Click Collection banner to show or hide the breadcrumb, description, product count and collection image.
Step 2: Set up the product grid
- Click Product grid.
- Set Products per page, Columns and Mobile columns, and the Pagination (1): page numbers, a load more button, or infinite scroll.
- Turn on Show grid view switch to let customers switch between large and compact cards.
Step 3: Set up filters and sorting
- Under Filtering and sorting, turn on filtering and pick a Filter layout: drawer, dropdown toolbar or sidebar.
- Choose how color filters look, whether availability is an "In stock only" switch, and whether price is a slider.
- Turn on sorting and pick its style.
Step 4: Add quick links (optional)
- Under Toolbar, pick a Quick links menu of collections to jump between, shown as pills or tabs.
Settings reference
Collection banner
| Show breadcrumb | Turns this on or off. |
|---|---|
| Show collection description | Turns this on or off. |
| Show product count | Turns this on or off. |
| Image | |
| Show collection image | Add an image to the collection in Shopify admin. |
| Show the first product image when the collection has none | Turns this on or off. |
| Image layout | Options: Beside the title, Wide, below the title. |
Product grid
| Products per page | Slider. |
|---|---|
| Columns | Slider. |
| Mobile columns | Options: 1, 2. |
| Pagination | Infinite scroll loads the next page as shoppers reach the end of the grid and keeps a button as a fallback. Options: Page numbers, Load more button, Infinite scroll. |
| Show product count | Turns this on or off. |
| Show grid view switch | Lets customers switch between large and compact product cards. Their choice is remembered. |
| Filtering and sorting | |
| Enable filtering | Turns this on or off. |
| Filter layout | Dropdown toolbar opens each filter under the toolbar. On mobile, filters always open in a drawer. Options: Drawer, Dropdown toolbar, Sidebar. |
| Drawer side | Options: Left, Right. |
| Show hide/show filters button | Sidebar layout: a toolbar button folds the sidebar away on desktop. |
| Filter groups open at first | Groups with a selected value always open. |
| Color filters | Options: Swatch circles, Swatch and name. |
| Show availability as an In stock only switch | Turns this on or off. |
| Show a price slider | Turns this on or off. |
| Enable sorting | Turns this on or off. |
| Sort style | Options: Expanding button, Dropdown, Select. |
| Toolbar | |
| Stick the toolbar to the top while scrolling | Turns this on or off. |
| Floating filter button on mobile | Appears at the bottom of the screen once the toolbar scrolls away. Replaces the sticky toolbar on mobile. |
| Quick links | A menu of collections to jump between, shown in the toolbar. |
| Quick links style | Options: Pills, Underlined tabs. |
| Show product counts on quick links | Turns this on or off. |
Section width, corners, padding, color scheme, divider and visibility work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- Infinite scroll loads the next page as shoppers reach the end of the grid and keeps a button as a fallback.
- On mobile, filters always open in a drawer. The floating filter button appears once the toolbar scrolls away.
- Groups with a selected value always open.
Troubleshooting
No filters show.
Filters come from the Search & Discovery app. Check that filtering is enabled there and in the Product grid section.
A metafield filter is missing.
Add it in the Search & Discovery app; Shopify only filters by metafields you list there.