# Collapsible tabs

![image](https://docs-assets.foxecom.app/zest-theme/Fox-BG%20Light%20(21)_FwblfVNi.jpg)

**Collapsible tabs** help break up longer descriptions and make them more visually appealing. 

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 type="success">

Steps

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

</Hint>

## How to edit a Collapsible tabs section

### Section settings

#### Section header

<Table widths="240,auto">

| Setting | Description |
| --- | --- |
| **Desktop padding bottom** | Add spacing below the section (Small / Medium / Large). |
| **Content spacing** | Adjust the gap between blocks within the section. |
| **Heading** | Enter a main title of the section.<br/>✍️ *Want to add highlighted text to the heading? Learn more:* [Highlight text](https://docs.foxecom.com/zest-theme/pages-global-sections/general-settings#highlight-text) |
| **Heading size** | Controls heading scale — Base, Large, XL, etc. |
| **Heading color** | Choose a custom text color or leave blank for default. |
| **Subheading** | Optional subtitle displayed below the heading. |
| **Description** | Add body text, such as contact hours or additional guidance. |

</Table>

#### Collapsible tab

<Table widths="240,auto">

| Setting | Description |
| --- | --- |
| **Font family** | Choose to use headings font or body font to the collapsible tabs' titles.<br/>✍️ *Set fonts in the Theme settings >*[Typography](https://docs.foxecom.com/zest-theme/theme-settings/typography) |
| **Heading size** | Size of the heading text. |
| **Column gap** | Adjust the gap between the Image card and Collapsible tabs. |
| **Content width** | Control the width of the content (Narrow width/ Full width). |

</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 widths="175,auto">

| Setting | Description |
| --- | --- |
| **Text** | The heading content. |
| **Heading size** | Size of the heading text. |
| **Heading color** | Optional custom color. |

</Table>

![image](https://docs-assets.foxecom.app/zest-theme/image_MdN5tXDx.png)

</Tab>

<Tab title="🖼 Image card (optional)">

Great for showing support info or a contact CTA alongside the tabs.

![image](https://docs-assets.foxecom.app/zest-theme/image_8vHiQN1y.png)

<Table widths="220,auto">

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

</Table>

</Tab>

<Tab title="📑 Collapsible tab">

Each block becomes a toggleable question with expandable content.

<Table widths="236,auto">

| Setting | Description |
| --- | --- |
| **Icon** | Add an optional icon to the tab. |
| **Heading** | Displayed as the tab title (e.g. a question). |
| **Collapsible tab content** | Rich text editor for the answer. Supports bold, links, etc. |
| **Tab content from page** | Pull tab content from an existing Shopify page. |
| **Default open** | Optionally set a tab to be expanded by default. |

</Table>

![image](https://docs-assets.foxecom.app/zest-theme/image_Uw6NwB8Q.png)

</Tab>
</Tabs>

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