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

# Collections with tabs

A two-column section: a vertical list of collection tabs beside a collection image and an optional product preview. Selecting a tab cross-fades to that collection.

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

***

## 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. |
| Enable boxed layout | Wraps the content panel in a contained box with its own color scheme.                                                                                                           |

### Gap

| Setting | Description                                                |
| ------- | ---------------------------------------------------------- |
| Desktop | Space between the image panel and the tab list on desktop. |
| Mobile  | Space between the image panel and the tab list on mobile.  |

### Collection image

| Setting        | Description                                                                                                    |
| -------------- | -------------------------------------------------------------------------------------------------------------- |
| Image position | **Right** — Image panel on the right, tabs on the left. **Left** — Image panel on the left, tabs on the right. |
| Image ratio    | Adapt follows the first image's natural ratio; the other options apply a fixed ratio to all tabs.              |

{% hint style="info" %}
**Tip:** Use the same image ratio across all tabs so the layout doesn't shift when switching between them.
{% endhint %}

### Featured products

| Setting                | Description                                                 |
| ---------------------- | ----------------------------------------------------------- |
| Show featured products | Display a small product preview below the collection image. |
| Number of products     | How many products to show per collection.                   |

### Collection title

| Setting            | Description                                                |
| ------------------ | ---------------------------------------------------------- |
| Size               | Size of the collection name in the tab list.               |
| HTML tag           | Semantic tag for the title. Use headings to help with SEO. |
| Show product count | Display the number of products next to each tab label.     |

### Autoplay

| Setting          | Description                                        |
| ---------------- | -------------------------------------------------- |
| Auto-rotate tabs | Automatically advance through the tabs on a timer. |
| Speed            | Time between tab advances.                         |

### Appearance

| Setting            | Description                                                                            |
| ------------------ | -------------------------------------------------------------------------------------- |
| Color scheme       | Color scheme for the section.                                                          |
| Boxed color scheme | Color scheme for the boxed content panel. Only visible when Enable boxed layout is on. |

### Boxed padding

Only visible when Enable boxed layout is on.

| Setting                 | Description                                         |
| ----------------------- | --------------------------------------------------- |
| Top and bottom          | Inner vertical spacing inside the box on desktop.   |
| Left and right          | Inner horizontal spacing inside the box on desktop. |
| Top and bottom (mobile) | Inner vertical spacing inside the box on mobile.    |
| Left and right (mobile) | Inner horizontal spacing inside the box on mobile.  |

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

### Header

An optional heading area above the tab list. The preset includes a Subheading and a Spacer. Add **Subheading**, **Heading**, and **Text** child blocks inside it — see [Header](/helix/theme-blocks/basic/header.md).

### Collection

A single tab. Add one block per collection.

| Setting      | Description                                                                                      |
| ------------ | ------------------------------------------------------------------------------------------------ |
| Collection   | The collection this tab links to.                                                                |
| Custom title | Overrides the tab label. Leave blank to use the collection name.                                 |
| Custom image | Overrides the collection's featured image for this tab.                                          |
| Color type   | Use the section's colors, or give this tab its own color scheme.                                 |
| Color scheme | The scheme applied when this tab is active. Only visible when Color type is set to color scheme. |