> 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/collage-tab.md).

# Collage tab

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

Use the **Collage tabs** section to organize content into horizontal tabs, each with its own image and message. Perfect for highlighting multiple promotions, collections, or brand categories without overwhelming your homepage.

{% 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 Collage tab section to your Shopify store

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

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

## How to edit a Collage tab section

### Section settings

<table><thead><tr><th width="270">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Heading size</strong></td><td>Controls the tab title text size.</td></tr><tr><td><strong>Desktop navigation alignment</strong></td><td>Position of the tab navigation bar (Left / Center / Right).<br></td></tr><tr><td><strong>Desktop image position</strong></td><td>Left or Right alignment of the image relative to text.</td></tr><tr><td><strong>Desktop image width</strong></td><td>Adjust how much space the image takes (in %).</td></tr><tr><td><strong>Image ratio</strong></td><td>Maintain consistent height with Fixed ratio or match original image with Adapt to image.<br></td></tr></tbody></table>

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

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

### Block settings

Each tab is a block inside the section. You can add multiple.

| Setting                   | Description                                                                                                                                                                                         |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Color scheme**          | <p>Choose from your theme’s predefined color schemes for background/text.<br>Learn how to add color schemes: <a data-mention href="/pages/E1dNsgsqbhMsJjy8Hv1S">/pages/E1dNsgsqbhMsJjy8Hv1S</a></p> |
| **Navigation title**      | The name that appears in the tab navigation bar. Keep it short.                                                                                                                                     |
| **Image**                 | Upload a high-quality image to visually represent the content.                                                                                                                                      |
| **Heading / Subheading**  | Main messaging. You can bold, italicize, or highlight text.                                                                                                                                         |
| **Description**           | Add supporting text, product info, or promotional messages.                                                                                                                                         |
| **Text alignment**        | Aligns heading, subheading, and description (Left / Center / Right).                                                                                                                                |
| **Button label**          | Add a call-to-action (e.g. “Shop Now”). Leave blank to hide.                                                                                                                                        |
| **Button link**           | Paste the URL or use Shopify’s link selector.                                                                                                                                                       |
| **Button style**          | Choose between primary, secondary, white or underline button.                                                                                                                                       |
| **Mobile text alignment** | Option to override desktop text alignment on mobile.                                                                                                                                                |

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

## Best practices

* **Stick to 2–3 tabs** to avoid overwhelming shoppers.
* Use **cohesive visuals** across tabs to maintain brand consistency.