Collection list
An editorial collection directory with atlas and triptych layouts, optional subcollection hierarchies, and independent section and collection heading sizes.
- Merchant-addable
- Yes
- Settings
- 17
- Block types
- —
- File
sections/collection-list.liquid
Used by default on: Collection list
When to use it
The list-collections template, and home pages that route by category.
Setting it up
- Write the heading, subheading, and body text under Content and data. Heading size also scales the subheading proportionally.
- Choose Collection display and, for a hierarchy, configure collection metafields or a navigation menu.
- Under Layout, choose Collection layout and Collection heading size. Small, Medium, and Large size the collection titles independently of the section heading.
- Choose the collection image ratio, image crop, color scheme, and section spacing.
Where the content comes from
Shopify collection data owns titles, URLs, descriptions, and featured images. Optional collection metafields or a navigation menu own hierarchy and ordering. Section settings own the header copy and presentation.
Notes and cautions
- Collection heading size applies to the parent or standalone collection titles in both layouts. It defaults to Medium and uses a smaller scale on phones. Atlas navigation and subcollection labels keep their compact type sizes.
- Collections per page limits standalone cards or parent groups in both layouts. Subcollections stay with their parent. Menu labels do not replace native collection titles. Metafield catalogs above 50 collections use standalone pagination; choose a menu for a larger curated hierarchy.
Collection headings and layout
The Collection list section displays native Shopify collections in Collection atlas or Collection triptych layouts. Shopify collection data supplies collection titles, links, descriptions, and images. Optional collection metafields or a navigation menu supply hierarchy and ordering. The section settings own the introductory copy and visual presentation.
Collections per page controls the number of standalone collections or parent groups on each page. Subcollections stay with their parent. Both hierarchy sources use numbered, server-rendered pagination that works without JavaScript. In hierarchy mode, the header total counts parent groups; in standalone mode, it counts all collections. The atlas sidebar count matches the collections visible on the current page, including a shorter final page. The total number of collections appears at the right of the section header, on the same row as the introductory body text in both layouts. It wraps below the copy when space is limited. Use pagination below the cards to browse the remaining pages.
The atlas sidebar and collection stories box have subtle shadows using the selected color scheme’s shadow color. Their rounded corners follow the theme’s corner style.
Set heading sizes independently
Heading size, under Content and data, sets the section heading and proportionally scales its subheading, with a 15px minimum for readability.
Collection heading size, under Layout, sets the parent and standalone collection titles in both layouts. It defaults to Medium. It does not resize the section heading, atlas navigation, subcollection labels, descriptions, or View collection links.
| Collection heading size | Desktop size | Phone size |
|---|---|---|
| Small | 21–30px | 18px |
| Medium | 28–40px | 20px |
| Large | 32–56px | 24px |
Desktop sizes scale with the viewport. Phone sizes apply below 750px. For example, choose Heading size → Large and Collection heading size → Small to give the directory introduction more emphasis than individual collection titles. Longer collection titles wrap inside their column.
Show collection descriptions
Enable Show collection descriptions under Content and data to display each parent or standalone collection’s description from Shopify admin. Collections with an empty description do not display an empty paragraph or a toggle.
Descriptions preview up to three lines. Read more appears only when the text exceeds that space and expands the full description in place; Read less returns to the preview. Both layouts support this behavior, and the preview is checked again when the available width changes. Descriptions use plain text. Without JavaScript the full description stays visible. Expansion follows the theme’s motion style and speed, and is immediate with reduced motion or the No motion setting. Opening and closing both animate the measured text height using Interface animation speed: 360ms for Standard, 700ms for Relaxed, and 1200ms for Slow. Changing direction during the animation continues from the current visible height.
Hierarchy sources and native titles
Navigation menus own grouping and order, while collection cards and sidebar entries always use the full native Shopify collection title, even if the navigation label is different. Collection featured images include Shopify’s first-product image fallback.
Metafield hierarchy discovery covers stores with up to 50 collections, within Shopify’s standard collection iteration limit. Larger catalogs automatically use the native paginated standalone directory so every collection remains reachable. Use a navigation menu to keep a curated hierarchy for a larger catalog. Keep parent and child metafields aligned.
Section settings
Every setting on the section itself, in the order it appears in the theme editor. Group headings match the editor's own grouping.
Content and data
Create custom.sub_collections as a list of collection references on parent collections and custom.parent_collection as a collection reference on child collections. Leave Parent collection empty on every top-level parent. Keep both sides aligned. With no relationships, or more than 50 collections, the directory uses paginated standalone collections. Use a navigation menu for larger hierarchies.
Use a main menu with collection links nested one level deep. Parent links create collection groups and child links create subcollections. When the menu has no parent collection links, all collections show as standalone collections.
Layout
Sets the collection titles in both layouts, independently of the section heading.
Applies to parent collection images at every screen size.
Image crop
Applies to collection images in this section.
Sets the number of standalone collections or parent groups per page. Subcollections stay with their parent.