> 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/global-sections/collections/collection-list.md). # Collection list Show a set of collections in a grid or carousel. Add a section header and a View all button to build a complete collection showcase on any page. ![Collection List section overview](/files/Dc8gy3fyeyXAQMEJUl9p) *** ## Settings ### Layout | 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. | | Desktop alignment | Horizontal alignment of the blocks on desktop. | | Mobile alignment | Horizontal alignment of the blocks on mobile. | ### Gap Vertical spacing between the stacked blocks (header, list, button). | Setting | Description | | ------- | ---------------------------------- | | Desktop | Spacing between blocks on desktop. | | Mobile | Spacing between blocks on mobile. | ### Background | Setting | Description | | ----------------------- | ------------------------------------------------------------ | | Media | The type of background media behind the section. | | Image | Background image. | | Mobile Image (optional) | Separate background image for mobile. | | Video | Shopify-hosted background video that autoplays muted. | | Overlay | Adds a color layer over the background media for legibility. | | Overlay color | Color and opacity of the overlay. | | Parallax effect | Scroll motion applied to the background media. | ### Appearance | Setting | Description | | ------------ | ----------------------------- | | Color scheme | Color scheme for the section. | ### Spacing | Setting | Description | | ----------------- | -------------------------------------------------- | | Top / Bottom | Outer spacing above and below the section. | | Custom for mobile | Set independent top and bottom padding for mobile. | *** ## Available Blocks This section is built from three static blocks — **Header**, **View all button**, and **Collection list**. ### Header Section header, for a heading and supporting text above the list. Add **Subheading**, **Heading**, and **Text** child blocks inside it — see [Header](/helix/theme-blocks/basic/header.md). ### View all button | Setting | Description | | -------------------- | ------------------------------------------------------------------ | | Label | The button text. | | Link | Where the button goes. | | Open link in new tab | Opens the link in a new browser tab. | | Style | Button style. Set separately for desktop and mobile. | | Height | Button height. Set separately for desktop and mobile. | | Full width | Stretches the button to fill the available width. Mobile only. | | Show icon | Adds an icon to the button. Set separately for desktop and mobile. | | Icon | Which icon to show. | | Icon position | Places the icon before or after the label. | | Icon size | Icon size, with a **Custom icon size** value when set to Custom. | ### Collection list | Setting | Description | | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | Collections | The collections to feature, in the order you pick them. | | Type | **Grid** or **Carousel**. The settings below change with this choice. | | Desktop columns / Mobile columns | Number of cards per row on each device. | | Enable swipe on mobile | Lets the cards scroll horizontally on mobile. Grid only. | | Show next slide preview on desktop | Reveals part of the next card to hint that it can be swiped. Carousel only. | | Custom columns | Set the column count per breakpoint yourself, via **Columns per breakpoint**. | | Gap — Horizontal / Vertical | Spacing between cards, with independent mobile values. Grid only. | | Gap — Desktop / Mobile | Spacing between cards in carousel mode. Carousel only. | | Show navigation on desktop | Previous / next arrows, with **Position**, **Style**, **Icon**, and **Behavior**. Carousel only. | | Show pagination on desktop | Slide indicators, with **Type**, **Top padding**, and an optional **Limit width** / **Max width** cap on the progress bar. Carousel only. | | Auto-rotate slides | Advances the carousel automatically, at a set **Speed**, and can **Pause on hover**. Carousel only. | #### Collection card Sits inside the Collection 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**. |