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

# Collapsible tabs

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

**Collapsible tabs** help break up longer descriptions and make them more visually appealing.&#x20;

Ideal for customer service or support pages, this section helps present information in an organized and expandable format — with optional image cards and headings for extra context.

## How to add a Collapsible tabs section to your Shopify store

{% hint style="success" %}
Steps

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

## How to edit a Collapsible tabs section

### Section settings

#### Section header

<table><thead><tr><th width="240">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Desktop padding bottom</strong></td><td>Add spacing below the section (Small / Medium / Large).</td></tr><tr><td><strong>Content spacing</strong></td><td>Adjust the gap between blocks within the section.</td></tr><tr><td><strong>Heading</strong></td><td>Enter a main title of the section.<br><span data-gb-custom-inline data-tag="emoji" data-code="270d">✍️</span> <em>Want to add highlighted text to the heading? Learn more:</em> <a data-mention href="/pages/ZxFdF1oKUnZZwOCogQFE#highlight-text">/pages/ZxFdF1oKUnZZwOCogQFE#highlight-text</a></td></tr><tr><td><strong>Heading size</strong></td><td>Controls heading scale — Base, Large, XL, etc.</td></tr><tr><td><strong>Heading color</strong></td><td>Choose a custom text color or leave blank for default.</td></tr><tr><td><strong>Subheading</strong></td><td>Optional subtitle displayed below the heading.</td></tr><tr><td><strong>Description</strong></td><td>Add body text, such as contact hours or additional guidance.</td></tr></tbody></table>

#### Collapsible tab

<table><thead><tr><th width="240">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Font family</strong></td><td>Choose to use headings font or body font to the collapsible tabs' titles.<br><span data-gb-custom-inline data-tag="emoji" data-code="270d">✍️</span> <em>Set fonts in the Theme settings ></em><a data-mention href="/pages/AeEqXn9iLhTgCBexj2ky">/pages/AeEqXn9iLhTgCBexj2ky</a></td></tr><tr><td><strong>Heading size</strong></td><td>Size of the heading text.</td></tr><tr><td><strong>Column gap</strong></td><td>Adjust the gap between the Image card and Collapsible tabs.</td></tr><tr><td><strong>Content width</strong></td><td>Control the width of the content (Narrow width/ Full width).</td></tr></tbody></table>

### Block settings

You can add the following blocks within the **Collapsible tabs** section:

{% tabs %}
{% tab title="🔹 Heading (optional)" %}
Used for adding an internal title above tabs.

<table><thead><tr><th width="175">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Text</strong></td><td>The heading content.</td></tr><tr><td><strong>Heading size</strong></td><td>Size of the heading text.</td></tr><tr><td><strong>Heading color</strong></td><td>Optional custom color.</td></tr></tbody></table>

<figure><img src="/files/MdN5tXDxuPRBWpqlkNHA" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="🖼 Image card (optional)" %}
Great for showing support info or a contact CTA alongside the tabs.

<figure><img src="/files/8vHiQN1yta2p8WYupO8O" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="220">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image</strong></td><td>Upload or select from free images.</td></tr><tr><td><strong>Desktop image position</strong></td><td>Left / Right of collapsible tabs.</td></tr><tr><td><strong>Desktop image width</strong></td><td>Adjust image size (e.g., 33%).</td></tr><tr><td><strong>Vertical alignment</strong></td><td>Align image Top/ Middle/ Bottom.</td></tr><tr><td><strong>Layout</strong></td><td>Choose from card design presets.</td></tr><tr><td><strong>Image overlay opacity</strong></td><td>Set overlay transparency.</td></tr><tr><td><strong>Text color</strong></td><td>Change color of the text over image.</td></tr><tr><td><strong>Heading / Description</strong></td><td>Add text and a message.</td></tr><tr><td><strong>Button label &#x26; link</strong></td><td>Add a CTA like "Contact us".</td></tr><tr><td><strong>Button style</strong></td><td>Choose between white, outline, solid, etc.</td></tr></tbody></table>
{% endtab %}

{% tab title="📑 Collapsible tab" %}
Each block becomes a toggleable question with expandable content.

<table><thead><tr><th width="236">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Icon</strong></td><td>Add an optional icon to the tab.</td></tr><tr><td><strong>Heading</strong></td><td>Displayed as the tab title (e.g. a question).</td></tr><tr><td><strong>Collapsible tab content</strong></td><td>Rich text editor for the answer. Supports bold, links, etc.</td></tr><tr><td><strong>Tab content from page</strong></td><td>Pull tab content from an existing Shopify page.</td></tr><tr><td><strong>Default open</strong></td><td>Optionally set a tab to be expanded by default.</td></tr></tbody></table>

<figure><img src="/files/Uw6NwB8QZR6WKe567VRu" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Best practices

* Use short, clear headings for each collapsible tab.
* Enable “Default open” on the most common question.
* Add an image card with contact details or a CTA to guide users.