This guide covers the list collections template: the page customers reach at /collections that shows all your collections in a grid. This is the directory page customers use when browsing your store by category.
What ships on the collections list page
The default template contains two sections:
| # | Section | Purpose |
|---|---|---|
| 1 | Collection promo hero | The same hero used on individual collection pages, configured here in promo mode by default |
| 2 | Collections | The grid of collection cards plus toolbar (count, sort, view toggle) and pagination |
You can reorder, remove, or add sections from the theme editor. The Collections section is the main content; the promo hero is optional.
Collections section settings
In the theme editor, navigate to the list collections page and click the Collections section.
Layout
| Setting | Range or options | Default | What it controls |
|---|---|---|---|
| Color scheme | All schemes | Scheme 1 | Color scheme applied to the section |
| Columns on desktop | 2 to 5 | 3 | Grid columns on screens 990px and wider |
| Columns on mobile | 1 or 2 | 1 | Grid columns on screens narrower than 750px |
| Image ratio | Square, Landscape, Portrait, Adapt | Square | Aspect ratio of collection card images. Adapt uses the natural ratio of each image |
| Padding top | 0 to 100 px in steps of 4 | 24 | Space above the section |
| Padding bottom | 0 to 100 px in steps of 4 | 24 | Space below the section |
The defaults differ from the collection page (which uses 4 desktop / 2 mobile). Three columns at desktop and 1 at mobile is the recommended layout for a category directory: each card has more visual weight than a product card needs.
Card content
| Setting | Default | What it controls |
|---|---|---|
| Show product count | On | Display the number of products inside each collection on the card |
| Show description | Off | Display the collection description (truncated to 12 words) below the title |
| Hide All collection | On | Hide the special "All" collection (handle all) from the grid. Most stores want this on because the All collection is a Shopify-generated catch-all that is rarely a useful navigation target |
| Collections per page | 8 to 48 in steps of 4 | 24 |
Animation
| Setting | Default | Options |
|---|---|---|
| Hover effect | Subtle | Subtle, None |
Subtle adds a gentle image scale and overlay softening on hover. None disables hover effects, useful if you want a static, gallery-like feel or if the hover effect conflicts with your design.
Collection card content
Each collection in the grid renders as a card with:
| Element | Source |
|---|---|
| Featured image | collection.featured_image. Falls back to a placeholder SVG when no image is set |
| Title | collection.title |
| Product count | collection.all_products_count. Only when Show product count is on |
| Description | collection.description, stripped of HTML and truncated to 12 words. Only when Show description is on AND the collection has a description |
To add or change a collection's image and description, go to Shopify admin, Products, Collections, open a collection, and edit the Image and Description fields.
Toolbar
The toolbar above the grid has three elements.
Collection count
A simple count: "12 collections" or similar. Reflects the count after the Hide All collection filter is applied.
Sort dropdown
Customers can sort the visible collections by:
| Sort option | Behavior |
|---|---|
| Default | The order returned by Shopify (collection listing order from admin) |
| Alphabetical: A to Z | Sorted by collection title ascending |
| Alphabetical: Z to A | Sorted by collection title descending |
| Most products first | Collections with more products at the top |
| Fewest products first | Collections with fewer products at the top |
Sort is performed client-side on the current page only; pagination order remains server-defined. The page does not reload, the URL does not change, and the sort does not persist into pagination (sorting after navigating to page 2 sorts only the cards on page 2, and page 1 may have been ordered differently).
The customer's selection is saved to the browser's local storage and is reapplied when the collections list page is revisited in the same browser.
View toggle
Customers can switch between Grid and List view:
| View | Layout |
|---|---|
| Grid | Cards in a multi-column grid. The default view |
| List | Cards stacked vertically, full-width, with the image on one side and content on the other |
The customer's view choice is saved to local storage and is reapplied when the collections list page is revisited in the same browser.
Pagination
The page uses standard Shopify pagination via {% paginate collections by N %}. When the number of collections exceeds Collections per page, numbered page links appear at the bottom of the grid with previous and next arrows.
There is no load more or infinite scroll mode for the collections list page. This page is typically a destination page that customers reach intentionally; numbered pagination matches that intent and is more accessible.
Empty state
If the store has no visible collections (for example, a brand-new store, or all collections are hidden), the page shows:
- A collection icon
- An "Empty" heading and short description
- A "Continue shopping" button that links to
routes.root_url(the store's localized root URL)
To customize the empty state copy, edit the locale strings under Online Store, Themes, Edit default theme content, Collections list.
How collections appear in the grid
Shopify generates the collections list automatically based on:
- All published collections in Shopify admin, Products, Collections.
- Smart collections (rule-based) and manual collections both appear.
- The "All" collection (handle
all) appears unless Hide All collection is on (default). - Hidden collections (those without a published status) do not appear.
To control which collections show up, manage them in Shopify admin. The theme renders whatever Shopify provides.
Multi-language and multi-currency
- Collection titles and descriptions reflect the customer's selected language (translated through Shopify's translation system).
- Featured images do not localize: the same image is used across all languages and markets unless you override it through metafields and theme customization.
- The All collection filter (Hide All collection) works against the literal handle
all, regardless of locale.
See markets-localization.md for the full localization workflow.
Performance considerations
- Collections per page at 24 is a good balance for most stores. Going to 48 increases initial load time on the page, especially when collection images are large.
- Collection card images are lazy-loaded below the first row.
- Sorting and view toggling are client-side; they do not trigger server requests after the initial page load.
What to do next
| If you want to | Read |
|---|---|
| Configure individual collection pages | template-collection.md |
| Set up the home page collection list section (a different feature) | sections-product-display.md |
| Configure search behavior | template-search.md |
End of template-list-collections.md.