> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/collection-page-sections/collection-list-page.md). # Collection list page The section on the collections listing page — the page at `/collections` that shows every collection in your store. It ships on the list-collections template, but can be added to any template except the header and footer groups. ![Collection list page section overview](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-801a802c1f0302485e6925f7851d5a921e6ab50b%2Fcollection-page-collection-list-page-overview.png?alt=media) *** ## Settings | Setting | Description | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Width | **Page** — Keeps the content within the page width set in your theme settings. **Full** — Stretches the content across the full browser width, with a small space at the edges. | | Alignment | Horizontal alignment of the section content. | | Gap — Desktop / Mobile | Space between the heading and the collection grid. | | Color scheme | Color scheme for the section. | | Padding | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**. | *** ## Available Blocks ### Heading The page title above the grid. | Setting | Description | | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | Text | The heading content. | | Size | Heading 1–6. | | HTML tag | Semantic tag rendered (Paragraph, H1–H6). Use headings in order for SEO. | | Animation | Entrance effect (Fade, Scale, Slide, Rotate words) played on scroll, with an optional **Delay**. Shown when block animations are enabled in theme settings. | ### Collection list The grid of collection cards. | Setting | Description | | -------------------------------- | --------------------------------------------------------------- | | Collections per page | How many collections to show before pagination. | | Custom collections | Show a hand-picked list instead of every collection. | | Desktop columns / Mobile columns | Number of cards per row — 2–6 on desktop, 1–2 on mobile. | | Gap — Horizontal / Vertical | Spacing between cards and rows, with independent mobile values. | #### Collection card Sits inside the list and controls how every card looks. | Setting | Description | | ------------------------------ | ------------------------------------------------------------------------------------------ | | Ratio | Crop ratio of the collection image. | | Placement | Whether the content sits below the image or over it. | | Position | Where the content sits when placed over the image. | | Content alignment | Horizontal alignment of the card content. | | Overlay / Overlay color | A color layer over the image, to keep text legible. | | Content gap — Desktop / Mobile | Spacing between the card's title and product count. | | Border thickness | Width of the card outline. | | Corner radius | Rounding of the card corners, with a **Custom corner radius** value when set to Custom. | | Shadow | Drop-shadow depth. | | Type | **Inherit** the section's color scheme, or apply a separate **Color scheme**. | | Content padding | Inner spacing on all four sides, with independent mobile values via **Custom for mobile**. | Each card holds three blocks: **Title** | Setting | Description | | ------------------------------ | -------------------------------------------------------------------------------------- | | Show product count | Display the number of products beside the collection name. | | Size | Heading 1–6. | | HTML tag | Semantic tag rendered (Paragraph, H1–H6). | | Product count font / font size | Typography for the count. | | Padding | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**. | **Description** | Setting | Description | | ---------- | ----------------------------------------------------------------------------------------------------------------- | | Source | **Description** — the collection description from your admin. **Product count** — the number of products instead. | | Text limit | Truncate to 1–3 lines, or 5–20 words. | | Size | Text size — Extra small → Double extra large. | | Padding | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**. | **Button** | Setting | Description | | ------------------------- | ----------------------------------------------------------------------------------------------------------------- | | Label | Button text. | | Style | Primary, Secondary, Outline, Subtle, or Text. | | Show icon | Adds an icon, with **Icon**, **Icon position**, and **Icon size** (plus **Custom icon size** when set to Custom). | | Height — Desktop / Mobile | Button height per device. | | Padding | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**. | #### Pagination How shoppers move through collections beyond the first page. | Setting | Description | | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | Type | **Pages** — numbered links. **Load more** — a button that appends the next page. **Infinite** — loads automatically as the shopper scrolls. | | Style | Button style for Load more — Primary, Secondary, Outline, or Text. | | Height | Button height — Inherit, or Extra small → Extra large. | | Result summary | Show a "showing X of Y" line above the control. | | Padding | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**. |