# Collapsible tabs

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FRhGOqph8gJvjtwZ2Zrzw%2FHyper%20docs%20screenshot%20do%20not%20delete%20(6).jpg?alt=media&#x26;token=6db53c02-c16c-4ea0-b450-888629fb0f67" alt=""><figcaption></figcaption></figure>

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

This comes in handy when you want to show important notice or information without taking up too much space.

## 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. Select **Collapsible tabs.**
3. Make necessary changes.
4. **Save** the setting&#x73;**.**
   {% endhint %}

## How to edit a Collapsible tabs section

### Section settings

#### Section header

<details>

<summary>See settings</summary>

* **Layout:** Set how the blocks show in the section as [Vertical](#vertical)/[Standing column](#standing-column).
* **Subheading**: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.
* **Heading**: Enter the primary title for your banner.
* **Heading size:** Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.
* **Description:** Add a detailed explanation or summary for the banner. Use rich text formatting like **bold**, *italic*, links, and lists for better visual emphasis.
* **Description size:** Select the size of the description text.
* **Button label:** Input the text for the call-to-action button.
* **Button link:** Add a link to the button to direct users to a specific page, product, or collection.
* **Button style:** Choose a style for the button.
* **Text alignment:**
  * Align the text in the section to the **Left**, **Center**, or **Right**.
  * Adjust alignment based on your banner’s design and layout.
* **Text alignment on Mobile:** Override desktop alignment settings specifically for mobile devices if needed.

</details>

{% tabs %}
{% tab title="Vertical" %}

<figure><img src="https://content.gitbook.com/content/AJrvmfqcj9TMoPkl3bNc/blobs/UdMw5qPWSRqDv1VH1pd2/image.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Standing column" %}

<figure><img src="https://content.gitbook.com/content/AJrvmfqcj9TMoPkl3bNc/blobs/ssQ6vbkH2EkTfoy6NoTS/image.png" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

#### Image card settings

Control the suitable spacing between the blocks by selecting **Column gap** and **Row gap** options.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FKrhVJ47LvBZdTs9y7zkw%2Fimage.png?alt=media&#x26;token=9db63d9c-d009-42f9-a302-93e6ebaa5a95" alt=""><figcaption></figcaption></figure>

#### Collapsible tab settings

**Style**: Choose between **Standard** or **Card** layout.

{% tabs %}
{% tab title="Standard" %}

<figure><img src="https://content.gitbook.com/content/AJrvmfqcj9TMoPkl3bNc/blobs/pSiwEKDxAoSMXTgClC15/image.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Card" %}

<figure><img src="https://content.gitbook.com/content/AJrvmfqcj9TMoPkl3bNc/blobs/h1QMsCHAZsENmdxHD12b/image.png" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Block settings

You can add more blocks to the collapsible tabs ([Collapsible tab](#collapsible-tab)/ [Heading](#heading)/ Image card).

<figure><img src="https://content.gitbook.com/content/AJrvmfqcj9TMoPkl3bNc/blobs/EY587bpngsRZE8C5W3l0/image.png" alt=""><figcaption></figcaption></figure>

#### Heading

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2F4qR7evYgz0BfcMIcLbCK%2Fimage.png?alt=media&#x26;token=e6efccce-4f9f-4f01-9e4c-ae94c94f12df" alt=""><figcaption></figcaption></figure>

Add a **Heading** and **Subheading** to your section.

{% hint style="info" %}
Pro tip :star:: Ensure the heading communicates the purpose of the section in just a few words.
{% endhint %}

#### Collapsible tab

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2F7XBhC17dElcMlPN2Nf1f%2Fimage.png?alt=media&#x26;token=1d89797a-fe7e-4dea-9395-ce8a3cea1d94" alt=""><figcaption></figcaption></figure>

* **Icon**: Add a visual cue next to the tab heading for better clarity or emphasis.

{% hint style="info" %}
Pro tip :star:: Choose an icon relevant to the content (e.g., a question mark for FAQs or a delivery truck for shipping information).
{% endhint %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FKSdu4ddJhMTEH22AqPcE%2Fimage.png?alt=media&#x26;token=a2c3066a-48cf-4fbb-a473-205514d9f101" alt=""><figcaption></figcaption></figure>

* **Heading:** Enter a clear and concise title for the tab in the Heading field.
* **Tab content**: Enter text, links, or formatted content into the Tab Content editor. Use the formatting options (e.g., bold, italic, lists) to structure the content for readability.
* **Custom liquid:** For advanced customization, add Liquid code to display dynamic content.

{% hint style="warning" %}
This option is best suited for developers or advanced users familiar with Shopify Liquid.
{% endhint %}

* **Tab content from page**: Dynamically populate the tab content by linking it to a specific Shopify page.
* **Default open**: Toggle Default Open to make the tab open when the page loads.

{% hint style="info" %}
Pro tip :star:: Use this feature sparingly to avoid overwhelming customers with too much open content.
{% endhint %}

* **Use subtext color**: Apply a subtext color to the tab content to match your theme’s style.

#### Image card

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FjDOkM4MT0BRv08a9GPO4%2Fimage.png?alt=media&#x26;token=9ba16492-e8de-4882-a802-565c1df45f8d" alt=""><figcaption></figcaption></figure>

Select an image to display next to your Collapsible tabs content.&#x20;

{% hint style="info" %}
You can add only 1 Custom card block per Collapsible tabs section.
{% endhint %}

You can choose whether the image appears on the **Left** or **Right** side of the Collapsible tabs content.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Fr3yK1DMCONmJGKcgWeVE%2Fimage.png?alt=media&#x26;token=bf318b00-c58e-42d7-bbc4-8fea7f970935" alt=""><figcaption><p>An example of image on the right for Standing column layout</p></figcaption></figure>

***

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FkUIzEsJKOeRiz891zyf5%2Flivechat883x471%20(1).png?alt=media&#x26;token=90cbed2c-e791-49c8-9f43-49a08bed6f1f" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>