# Collapsible tabs
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.
In this article, we will show you how to add a Collapsible tabs section.
## 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 settings**.**
{% endhint %}
## How to edit a Collapsible tabs section
### Section settings
#### General
Adjust the **Container** (Fixed width/Narrow) for this section.
#### Section header
Select your preferred **Layout** for the section:
{% tabs %}
{% tab title="Vertical" %}
{% endtab %}
{% tab title="Standing column" %}
{% endtab %}
{% endtabs %}
Add the content you want in the **Heading** to attract customers' attention
* Leave it blank if you do not want to display it
You can also change the **Heading size** to:
* Heading xs
* Heading sm
* Heading md
* Heading lg
* Heading xl
* Heading 2xl
* Display md
* Display lg
* Display xl
to make the content look balanced on your website.
#### Highlight text
[How to apply Highlight text to the section heading and block headings?](/sleek-theme/pages-global-sections/general-settings.md#highlight-text)
Use the provided text fields to add a suitable **Subheading** and **Description**.
* Leave them blank if you do not want to display them
You can also change the **Text size** to Small/ Base size/ Large to make the content look balanced on your website.
The call-to-action button will get the link from the provided **Button link** field.
Give the button a **label,** and a specific **Button style**:
* Primary button
* Secondary button
* Underline button
#### Grid settings
You can also control the suitable spacing between the blocks by selecting **Column gap** and **Row gap** options.
* **Column gap**: Extra large/ Large/Medium/Small/ Extra small/ None
* **Row gap**: Extra large/ Large/Medium/Small/ Extra small/ None/ Same as the column gap
#### Collapsible tab
Select your preferred **Style** for the Collapsible tab blocks:
{% tabs %}
{% tab title="Standard" %}
{% endtab %}
{% tab title="Card" %}
{% endtab %}
{% endtabs %}
Adjust the **Color scheme** for the Collapsible tab blocks.
Moreover, you can also change the **Font family to** Body font/ Headings font and **Heading size** to Heading xs/ Heading sm/ Heading md/ Heading lg/ Base size for the Collapsible tab blocks.
Adjust the **Icon size** (Extra small/ Small/ Extra medium/ Medium/ Large) to make it look well-proportioned with the Collapsible tab heading.
### Block settings
You can add more blocks to the collapsible tabs (Collapsible tab/ Heading/ Image card).
#### Collapsible tab
You can choose a wide range of icons to display in the heading - **Icon.**
For content, add the needed message/info into the provided fields such as **Heading**, **Collapsible tab content,** and **Custom liquid**.
You can enable **Default open** if you want the tab always to open when entering the page.
Then you can credit content from a page to the collapsible tab by **Tab content from the page** section.
#### Heading
Fill in the suitable **Heading**, **Subheading** and change the **Heading size** (Heading 1/ Heading 2/ Heading 3).
#### Image Card
Adjust the **Color scheme** for the image card block.
**a) Block settings**
This setting allows you to adjust the **Desktop image position** to the Left or Right and **Vertical alignment** to the **Top**/ **Middle**/ **Bottom**.
Moreover, you can use the slider to change the **Desktop image width** of the Image card block between 30% and 70%.
**b) Image**
Click **Select image** to assign the image to the banner on the desktop and use the slider to change the **Image overlay opacity**.
**c) Content**
Add some text for the banner’s **Heading, Subheading**, and **Description.** Leave them blank if you do not want to display them.
You can also change the **Heading size** (Heading 1/ Heading 2/ Heading 3) to make your image card block look more balanced.
Add a call-to-action button that directs customers to the target page specified in the **Card link** field. Add a **Label** then choose a **Button style** (Primary button/ Secondary button/ Underline button)**.**
Furthermore, you can also modify the look as well as the position of the content by changing these properties:
* **Content position**: Top left/ Top center/ Top right/ Middle left/ Middle center/ Middle right/ Bottom left/ Bottom center/ Bottom right
* **Content alignment**: Left/ Center/ Right
* **Content spacing**: Small/ Medium/ Large
**d) Mobile settings**
Especially, if you want to display a different card image on the mobile device, you can insert another image to the **Image** field.
You are able to display the content below or above the collapsible tabs by enabling/disabling the **Display the card above collapsible tabs** checkbox.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.foxecom.com/sleek-theme/theme-sections/collapsible-tabs.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.