> 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-editorial.md).

# Collection list: Editorial

A typographic way to show your collections. Each collection is a text row — name, product count, and an arrow — and the rows flow down one to four columns. On devices with a mouse, the collection image fades in beside the row being hovered.

Find it under **Collections** when you add a section in the theme editor.

***

## 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. **Full (no padding)** — Runs the rows edge to edge. With a border on the rows, the outer lines fall off the screen so only the lines between rows remain. |
| Desktop alignment | Horizontal alignment of the header and button on desktop — **Left** or **Center**.                                                                                                                                                                                                                                                        |
| Mobile alignment  | Horizontal alignment of the header and button on mobile — **Left**, **Center**, or **Right**.                                                                                                                                                                                                                                             |

### Divider

| Setting             | Description                                                                                                                      |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| Show top divider    | Draws a line above the section.                                                                                                  |
| Show bottom divider | Draws a line below the section.                                                                                                  |
| Full width divider  | On, the line runs the full width of the screen. Off, it stops where the section content does. Only visible when a divider is on. |

### 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 — **None**, **Image**, or **Video**. |
| Video                   | Background video. Only visible when Media is set to Video.                           |
| Image                   | Background image. Only visible when Media is set to Image.                           |
| Mobile Image (optional) | Separate background image for mobile. Only visible when Media is set to Image.       |
| Overlay                 | Adds a color layer over the background media.                                        |
| Overlay color           | Color and opacity of the overlay.                                                    |
| Parallax effect         | Scroll motion applied to the background media.                                       |

### Color

| Setting      | Description                   |
| ------------ | ----------------------------- |
| Color scheme | Color scheme for the section. |

### Padding

| 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

A button below the list, typically linking to all collections. It has the same settings as the View all button in [Collection list](/helix/global-sections/collections/collection-list.md#view-all-button).

### Collection list

Controls the rows as a whole.

| Setting         | Description                                              |
| --------------- | -------------------------------------------------------- |
| Desktop columns | How many columns the rows flow down on desktop — 1 to 4. |
| Mobile columns  | 1 or 2 columns on mobile.                                |

**Gap**

| Setting | Description                      |
| ------- | -------------------------------- |
| Desktop | Spacing between rows on desktop. |
| Mobile  | Spacing between rows on mobile.  |

**Collection appearance**

| Setting              | Description                                                                   |
| -------------------- | ----------------------------------------------------------------------------- |
| Border thickness     | Line around each row. With a gap of 0, neighbouring rows share one line.      |
| Show background      | Fills each row with a light grey background.                                  |
| Corner radius        | **Inherit**, **Square**, **Rounded**, or **Custom**.                          |
| Custom corner radius | Set an exact corner radius. Only visible when Corner radius is set to Custom. |
| Shadow               | Drop shadow on each row — None to Large.                                      |

**Collection title**

| Setting              | Description                                                                                  |
| -------------------- | -------------------------------------------------------------------------------------------- |
| Size                 | Title size on desktop — Heading 1 to Heading 6.                                              |
| Mobile size          | Title size on mobile — Heading 1 to Heading 6.                                               |
| HTML tag             | Semantic tag for the title (Paragraph, H1–H6). Use headings in order for better SEO.         |
| Show product count   | Shows the number of products beside the collection name.                                     |
| Show navigation icon | Shows the arrow at the end of each row. It is always hidden when mobile is set to 2 columns. |

**Padding**

| Setting                 | Description                                               |
| ----------------------- | --------------------------------------------------------- |
| Top and bottom          | Inner spacing above and below the row content on desktop. |
| Left and right          | Inner spacing either side of the row content on desktop.  |
| Top and bottom (mobile) | Inner spacing above and below the row content on mobile.  |
| Left and right (mobile) | Inner spacing either side of the row content on mobile.   |

### Collection

One row. Add one Collection block per collection, inside the Collection list.

| Setting      | Description                                                                                               |
| ------------ | --------------------------------------------------------------------------------------------------------- |
| Collection   | The collection this row links to.                                                                         |
| Custom title | Replaces the collection name on the row.                                                                  |
| Custom image | The image shown on hover. Without one, the row uses the collection image, then the first product's image. |

{% hint style="info" %}
The hover image only appears on devices that can hover, such as a desktop with a mouse. On phones and tablets, the rows show as text only.
{% endhint %}

***

{% hint style="info" icon="headset" %}
**Need help?**

Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.

<a href="https://go.crisp.chat/chat/embed/?website_id=6c25581e-794a-41b4-8552-52f3de1dd1f7" class="button secondary" data-icon="comments">Chat with us</a> <a href="https://modutheme.ticksy.com" class="button primary" data-icon="ticket">Submit a ticket</a>
{% endhint %}