# Collection tabs

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FV2atGVcYOW2RP43J6atc%2FFox-BG%20Light%20(25).jpg?alt=media&#x26;token=016f1691-9464-41f9-887b-6cf070216313" 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](https://docs.foxecom.com/zest-theme/changelog "mention")
{% 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FZzKlcq2NSPot7876a7FW%2Fimage.png?alt=media&#x26;token=8f7604b7-08f0-4cce-af7e-282e3caa4884" 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/zest-theme/theme-sections/collection-tabs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.