Collection Page — Default
A collection listing with optional promo header, filters, sorting, product grid, then footer sections (divider, long description, FAQs).
Overview
| Item | Detail |
|---|---|
| Template | templates/collection.json |
| URL | /collections/{handle} |
| Main section | sections/main-collection.liquid |
Sections (order)
- collection-header — hero image / parallax (optional; often disabled)
- promo-grid — sale or campaign banner (optional; often disabled)
- main-collection — filters, subcollections, product grid
- divider — horizontal rule under the grid / pagination
- collection-description — full collection description (Show more / less)
- collection-faq — collection-specific FAQs from metafields
main-collection blocks
- Description (short block in the grid area, if enabled)
- Subcollections
- Product grid (e.g. 4 columns × N rows)
Step-by-step user journey
Step 1 — Open the collection
- Arrive from the navigation, a homepage tile, or the URL
- See the optional header image (if enabled)
Step 2 — Promo strip
- Read the promo grid banner (if enabled)
- Click the CTA (sale page or product)
Step 3 — Subcollections (if present)
- Child collection tiles
- Click → nested collection
Step 4 — Filter products
- Open the filter button or sidebar (style: drawer)
- Select availability, price, size, colour and so on
- Colour swatches and labels are shown
- Apply → the grid updates via URL query parameters
Step 5 — Sort
- Sort dropdown (Featured, Best selling, Price, Date…)
- The grid re-orders
Step 6 — Browse the grid
- Scroll the product cards (images load faster when Compress product card images is on in Theme settings → Products)
- Hover or tap the swatches (if on)
- Actions:
- Card click → full product page
- Quick shop → modal product page (button appears immediately on hover)
- Pagination or Load more brings the next page
Step 7 — Read collection SEO content (footer)
- Optional divider line under the grid
- Long collection description — expand with Show more if enabled
- Collection FAQs — accordion questions from collection metafields
Step 8 — Add without leaving (optional)
- Quick shop → add to cart → cart drawer → keep browsing
Filter / grid settings (reference)
| Setting | Typical default |
|---|---|
| Sidebar | On |
| Filter style | Drawer |
| Collapsed filters | Yes |
| Colour swatches | On |
| Sort | On |
| Products per row | 4 |
| Rows | 10 |
Global product card images
| Setting | Where | Default |
|---|---|---|
| Compress product card images | Theme settings → Products | On |
Collection FAQ metafields
| # | Label | Content |
|---|---|---|
| 1 | custom.faq_1_label | custom.faq_1_content |
| 2 | custom.faq_2_label | custom.faq_2_content |
| 3 | custom.faq_3_label | custom.faq_3_content |
| 4 | custom.faq_4_label | custom.faq_4_content |
| 5 | custom.faq_5_label | custom.faq_5_content |
Empty labels are skipped. Full setup: Collection FAQ.
<!-- BEGIN GENERATED: theme-editor -->
Theme Editor settings
Each section below links to its full settings reference — every setting with id, type, default and a screenshot of the panel.
| Section | Type | Settings | Blocks |
|---|---|---|---|
| Circular Sale Nav - Title | Circular-Sale-Navigation-Title | 5 | 1 |
| Circular Sale Navigation | Circular-Sale-Navigation | 6 | 0 |
| Collection header | collection-header | 4 | 0 |
| Product grid | main-collection | 12 | 3 |
| Promotion grid | promo-grid | 9 | 7 |
| Divider | divider | 6 | 0 |
| Collection description | collection-description | 14 | 0 |
| Collection FAQ | collection-faq | 9 | 0 |
Full index: settings reference
<!-- END GENERATED: theme-editor -->Related files
templates/collection.json
sections/collection-header.liquid
sections/main-collection.liquid
sections/promo-grid.liquid
sections/divider.liquid
sections/collection-description.liquid
sections/collection-faq.liquid
snippets/collection-grid.liquid
snippets/collection-grid-filters.liquid
snippets/collection-grid-filters-form.liquid
snippets/product-grid-item.liquid
snippets/image-element.liquid
snippets/subcollections.liquid
snippets/pagination.liquid