> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Blum Collapsible Content

**Theme:** Blum · **Section type:** All-template section

The **Collapsible content** section shows a list of questions or topics that customers click to open. Use it for FAQs, shipping and return details, or product care, so customers find answers without leaving the page.

> **Note:** You can add this section to any template, but not to the header or footer. The section comes with 5 **Collapsible item** blocks.
![Collapsible content section with FAQ items](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/collapsible-1_ghzwqh.png)

**What you can do**
- Add the section and your items
- Show the content of a page in an item
- Add icons, an image, or a button
- See what customers see
- Look up every setting
- Fix common problems

---

## Add the section and your items

1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Collapsible content**.
3. Under **General**, enter a **Section subheading**, a **Section heading**, and a **Section description**. Leave a field empty to hide it.
4. Click a **Collapsible item** block.
5. Under **Text**, enter the question or topic in **Heading**, and the answer in **Description**.
6. To add more items, click **Add block** > **Collapsible item**.
7. Click **Save**.

> **Tip:** Write each heading as the question a customer would ask, for example "How long does shipping take?".

## Show the content of a page in an item

1. In your Shopify admin, create the page in **Online Store** > **Pages**, for example your shipping policy.
2. In the theme editor, click a **Collapsible item** block.
3. Under **Text**, select the page in **Content from page**.
4. Click **Save**.

The page content shows below the **Description**. When you update the page, the item updates too.

## Add icons, an image, or a button

**Icons**
1. Click the **Collapsible content** section and check **Show icons** under **Collapsible items**.
2. Click a **Collapsible item** block. Under **Icon**, select an **Icon source**: **Theme library**, **Custom image**, or **Custom SVG**, then pick or add the icon.

**Image**
1. Click the **Collapsible content** section.
2. Under **Image**, select an **Image** and an **Image ratio**.
3. Under **Layout**, select a **Content ordering on desktop**: **Text first** or **Image first**.

**Button**
1. Under **Button**, enter a **Label** and add a **Link**.

Click **Save** when you're done.

## What customers see

- **Items:** each item shows its heading with a **+** icon. Customers click the heading to open the item, and the icon changes to **−**.
- **One at a time:** opening an item closes the item that was open.
- **First item:** with **Expand first item by default**, the first item is open when the page loads.
- **Image:** on desktop, the image takes about a third of the width, next to the items. On mobile, the items and the image stack.
- **Button:** shows below the section.
![Collapsible item opened to show its answer](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/collapsible-2_1tv4u6w.png)

## Settings reference

### General

| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. You can edit color schemes in Theme settings > Colors. |
| Section subheading | Small text above the heading. Leave it empty to hide it. |
| Section heading | The main heading. Leave it empty to hide it. |
| Section description | Short text below the heading. Leave it empty to hide it. |

### Layout

| Setting | What it does |
| ---- | ---- |
| Content alignment | Aligns the section heading, the items, and the button to the Left or Center. |
| Content ordering on desktop | Places the items first (Text first) or the image first (Image first) on desktop. |
| Remove padding top | Removes the space above the section. |
| Remove padding bottom | Removes the space below the section. |

### Image

| Setting | What it does |
| ---- | ---- |
| Image | An image next to the items. A 700 × 500 px .png is recommended. |
| Image ratio | Sets the shape of the image: Square (1:1), Portrait (2:3), Landscape (3:2), or Adapt to image. |

### Button

| Setting | What it does |
| ---- | ---- |
| Label | The button text. Leave it empty to hide the button. |
| Link | Where the button goes. Appears when the button has a label. |

### Collapsible items

| Setting | What it does |
| ---- | ---- |
| Show icons | Shows an icon before each item heading. |
| Expand first item by default | Opens the first item when the page loads. |

### Collapsible item block settings

| Setting | What it does |
| ---- | ---- |
| Icon source | Selects where the icon comes from: Theme library, Custom image, or Custom SVG. |
| Theme library | Selects an icon from the theme's icon list. Used with Theme library. |
| Custom image | Uses your own image as the icon. Use a square image. Used with Custom image. |
| Custom SVG | Uses your own SVG code as the icon. Used with Custom SVG. |
| Heading | The question or topic customers click. |
| Description | The answer or content shown when the item opens. |
| Content from page | Adds the content of a store page below the description. |

## Troubleshooting

**Icons don't show.**
Check **Show icons** under **Collapsible items** in the section settings.

**Two items can't be open at the same time.**
This is how the section works: opening one item closes the others.

**The same text shows twice in an item.**
The item shows both the **Description** and the **Content from page**. Clear one of them.

**The first item is always open.**
Uncheck **Expand first item by default** under **Collapsible items**.

## Related articles

- [Blum Text Section](https://doc.ecomx.co/en/article/blum-text-section-1hbal5p/)
- [Blum Contact Form](https://doc.ecomx.co/en/article/blum-contact-form-14mavbl/)
- [Blum What Icons Can Be Used On Blum Theme](https://doc.ecomx.co/en/article/blum-what-icons-can-be-used-on-blum-theme-jnfsrj/)
- [Blum Page Template](https://doc.ecomx.co/en/article/blum-page-template-wpdqk1/)