> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/zest-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/zest-theme/theme-sections/collection-tabs.md).

# Collection tabs

<figure><img src="/files/iMwWkcpoo3BsCNE27FdR" alt=""><figcaption></figcaption></figure>

Display multiple product collections in a sleek tabbed layout. It’s perfect for highlighting different product categories, seasonal edits, or featured collections — all in one compact space.

When a customer clicks (or hovers, depending on your settings) a tab, the corresponding collection content (title, description, image/icon) appears on the left or right side.

{% hint style="info" %}
This section is available on ✨ **Zest version 7.0.0 onwards**. See our [Changelog](/zest-theme/changelog.md)
{% endhint %}

## How to add a Collection tab section to your Shopify store

{% hint style="success" %}
**Steps**

1. In the theme editor (**Customize**), click **Add section.**
2. Make necessary changes.
3. Locate **Collection tabs.**
4. **Save.**
   {% endhint %}

## How to edit a Collection tab

### Section settings

<table><thead><tr><th width="250">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Desktop image position</strong></td><td>Choose whether the image appears on the <strong>left</strong> or <strong>right</strong> of the tabs (auto-adjusted for mobile).</td></tr><tr><td><strong>Image ratio</strong></td><td>Select aspect ratio: <code>Adapt to first image</code>, <code>Square (1:1)</code>, <code>Portrait (3:4)</code>, or <code>Landscape (4:3)</code>.</td></tr><tr><td><strong>Prefix header</strong></td><td>Choose to show a tab prefix as <code>Ordinal number</code> (01, 02, 03...) or an <code>Icon</code>. <br>If you want to use icons, upload the image icons later in the <a href="#block-settings">block settings</a>.</td></tr><tr><td><strong>Trigger open tab</strong></td><td>Choose how a tab opens: on <code>Click</code> or <code>Hover</code>.</td></tr><tr><td><strong>Auto-rotate content</strong></td><td>Enable this to auto-rotate between tabs after a set interval (in seconds).</td></tr><tr><td><strong>Change content every</strong></td><td>Adjust the timing for auto-rotation (only visible when enabled).</td></tr></tbody></table>

### Block settings

<figure><img src="/files/ILjrOTeOuS1VMeppyJDf" alt=""><figcaption></figcaption></figure>

Each **Collection** block represents a tab.

<table><thead><tr><th width="250">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Collection</strong></td><td>Select a Shopify collection to display.</td></tr><tr><td><strong>Image</strong></td><td>Upload an image (optional). If left blank, the collection’s default image will be used.</td></tr><tr><td><strong>Heading</strong></td><td>Optional custom title for the tab content. Leave blank to use the collection’s title.</td></tr><tr><td><strong>Heading size</strong></td><td>Choose heading font size (<code>Small</code>, <code>Medium</code>, <code>Large</code>, etc.).</td></tr><tr><td><strong>Text</strong></td><td>Add a short description or promotional copy. If left blank, it uses the collection’s description.</td></tr><tr><td><strong>Icon</strong></td><td>Upload an icon to represent this collection tab. If the <strong>Prefix header</strong> is set as icon.</td></tr></tbody></table>