# Collapsible tabs

<div data-full-width="true"><figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fa5w6LQkUFhLWSt58jhjP%2FHelp%20Center%20banner%20%201250%20x%20200-2.png?alt=media&#x26;token=ab0daf12-b917-4435-a603-9a3f6613f853" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=minimog%2Bhelp%2Bcenter&#x26;utm_medium=banner&#x26;utm_campaign=foxaffiliatelaunch2024">Explore FoxEcom Affiliate Program now </a><span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FLacJFsn9pcFdGby2qQsN%2FScreen%20Shot%202021-10-14%20at%2020.52.17.png?alt=media\&token=2e983555-9a70-4a5a-892c-7b02d86dc1d7)

Collapsible tabs help break up longer descriptions and make them more visually appealing. This comes in handy when you want to show important notice or information without taking up too much space.

{% hint style="success" %}
Steps

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Collapsible tab** sectio&#x6E;**.**
3. **Save.**
   {% endhint %}

## Section settings

Change the **Container type** of the section to Fixed width/Stretched width/Narrow width.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FUzXuKD5bwzmXsavHlD48%2Fimage.png?alt=media&#x26;token=42f51914-9261-41fe-8b7c-2389329d39c9" alt="" width="292"><figcaption></figcaption></figure>

## Block settings

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FJ6QaLnZfOH8KsZV6WRmv%2Fimage.png?alt=media&#x26;token=c3295939-ba00-4c3f-a4a9-d9a9660d837c" alt=""><figcaption></figcaption></figure>

### Custom content block

Add the needed message/information into the provided fields. Check the box "default open" if you want the tab to always open when entering the page.

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FRSLphlRaNMugM8YQSAeq%2FScreen%20Shot%202021-10-14%20at%2020.59.44.png?alt=media\&token=5b474516-d248-4fa3-97e1-ee1cd7942ec4)

### Custom liquid block

For the liquid block, you need to add your liquid code.&#x20;

To learn more about liquid, see [Liquid](https://shopify.dev/api/liquid).

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FDmmLwxCyBclnZRBCfawm%2FScreen%20Shot%202021-10-14%20at%2021.00.44.png?alt=media\&token=f3c634a0-1780-4d4c-bbde-f23fcb1257c4)