> 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/collections-with-background.md).

# Collections with background

Show collections as full-height cards, each sitting over its own background image, video, or color. As shoppers move between collections, the title and background change together.

![Collections with background overview](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-5a694d34cd67f7ad1ded69acf432790cdb706d4b%2Fglobal-sections-collections-with-background-overview.png?alt=media)

{% hint style="success" %}
Add an overlay to each collection card to keep titles readable over busy images or videos.
{% endhint %}

***

## 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)** — Stretches the content across the full browser width, with no space at the edges. |
| Show product count | Display the number of products next to each collection title.                                                                                                                                                                                                                            |
| Title layout       | **Horizontal** — Collection titles sit in a row. **Vertical** — Collection titles stack in a column.                                                                                                                                                                                     |
| Title max width    | Maximum width of the title area. Only available when Title layout is Horizontal.                                                                                                                                                                                                         |
| Desktop position   | Where titles sit over the section, on a nine-point grid.                                                                                                                                                                                                                                 |
| Sticky title       | Keep the active title in view as shoppers scroll through the section.                                                                                                                                                                                                                    |
| Gap                | Spacing between collection cards on desktop.                                                                                                                                                                                                                                             |
| Height             | Height of the section.                                                                                                                                                                                                                                                                   |

### Mobile 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. |
| Mobile layout        | Arrange the collection titles in a row or a column on mobile.                                                                                                                   |
| Mobile position      | Where titles sit over each card on mobile, on a nine-point grid.                                                                                                                |
| Gap                  | Spacing between collection cards on mobile.                                                                                                                                     |
| Card height (mobile) | Height of each card on mobile.                                                                                                                                                  |

### Title typography

| Setting        | Description                                                      |
| -------------- | ---------------------------------------------------------------- |
| Desktop size   | Title size on desktop.                                           |
| Mobile size    | Title size on mobile.                                            |
| HTML title tag | Semantic tag for the title. Use headings to help with SEO.       |
| Outline text   | Show titles as outlined (hollow) text instead of solid fill.     |
| Text opacity   | Opacity of inactive titles, so the active collection stands out. |

### Color

| Setting                 | Description                                                     |
| ----------------------- | --------------------------------------------------------------- |
| Color scheme            | Color scheme for the section.                                   |
| Collection color scheme | Color scheme applied to the collection titles and card content. |

### 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

### Collection

A single collection card. Add one block per collection.

| Setting                        | Description                                                         |
| ------------------------------ | ------------------------------------------------------------------- |
| Collection                     | The collection this card features.                                  |
| Custom title                   | Overrides the collection name on the card.                          |
| Media type                     | **Image** or **Video** for the card background.                     |
| Custom image                   | The background image, when Media type is Image.                     |
| Custom image mobile (optional) | Separate background image for mobile.                               |
| Video                          | Shopify-hosted background video. Autoplays muted.                   |
| Overlay                        | Adds a color layer over the background, to keep the title readable. |
| Overlay color                  | Color and opacity of the overlay.                                   |