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

# Electro How to Use Electro Collapsible Content

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

A Collapsible content section shows a list of rows that customers click to open and close, next to an optional heading, description, image, and button. Use it for FAQs, shipping and return details, or product care tips, so customers find answers without a long page of text.

> **Note:** You can add this section to any template, except the header and footer. Each section holds up to 10 collapsible items.
![Electro Collapsible content section with a heading, an image, and FAQ rows with the first row open](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/collapsible-1_18q5ei7.jpg)

**What you can do**
- Add the section and your questions
- Show content from a page
- Choose an icon for each row
- Add an image and a button
- See what customers see
- Change the colors and layout
- Fix common problems

---

## Add the section and your questions
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Collapsible content**. The section comes with 5 collapsible items.
3. Under **General**, enter a **Subheading**, **Heading**, and **Description**. Leave a field empty to hide it.
4. Click a **Collapsible items** block.
5. Under **Text**, enter the **Heading** (the question) and the **Description** (the answer).
6. To add more rows, click **Add block** > **Collapsible items**.
7. Click **Save**.

> **Tip:** Keep each heading short and phrased like a customer's question, such as "Do you ship internationally?". Customers scan the headings before they open a row.

## Show content from a page
Use this when the answer is long or already exists as a page, such as your shipping policy.

1. In Shopify admin, create the page in **Online Store** > **Pages** if it doesn't exist yet.
2. In the theme editor, click a **Collapsible items** block.
3. Under **Text**, select the page in **Content from page**.
4. Click **Save**.

The page content appears in the row, below the block's **Description**. To show only the page content, leave **Description** empty.

## Choose an icon for each row
1. Click the **Collapsible content** section and make sure **Show icons** is selected.
2. Click a **Collapsible items** block.
3. Under **Icon**, choose an **Icon source**:
   - **Theme library:** pick an icon from the **Theme library** list. Choose None for no icon.
   - **Custom image:** select an **Image**. Square images work best.
   - **Custom SVG:** paste your SVG code in **Custom SVG**.
4. Click **Save**.

> **Tip:** To see every icon in the Theme library list, read What icons can you use on Electro theme.

## Add an image and a button
1. Click the **Collapsible content** section.
2. Under **Image**, select an **Image** and choose an **Image ratio**.
3. Under **Button**, enter a **Label** and a **Link**.
4. Click **Save**.

## What customers see
- **Rows:** customers click a row's heading to open it and click again to close it. Only one row is open at a time, so opening a row closes the one that was open.
- **First row:** if **Expand first item initially** is selected, the first row is open when the page loads.
- **Large screens:** on screens 769 px and wider, the heading, description, image, and button appear on the left, and the rows appear on the right.
- **Tablets and phones:** everything stacks in one column: the heading and description, the image, the rows, and then the button below the rows.
![Collapsible content on a phone with the third row open](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/collapsible-2_7g1j44.png =390x552)

## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the background and text colors of the section. You can edit color schemes in Theme settings > Colors. |
| Subheading | The short line above the heading. Leave it empty to hide it. |
| Heading | The section title. Leave it empty to hide it. |
| Heading size | Sets the heading size: H2, H3, H4, or H5. |
| Description | Text below the heading. |

### Layout
| Setting | What it does |
| ---- | ---- |
| Content alignment on mobile | Aligns the heading, description, and button to the Left or Center on screens narrower than 769 px. On large screens, they're always aligned left. |

### Collapsible items
| Setting | What it does |
| ---- | ---- |
| Show icons | Shows the icon you choose in each Collapsible items block. |
| Expand first item initially | Opens the first row when the page loads. |
| Card color scheme | Sets the background and text colors of the rows. |

### Image
| Setting | What it does |
| ---- | ---- |
| Image | An image shown below the heading and description. 1600 x 800 px PNG is recommended. |
| Image ratio | Sets the image shape: Square, 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 | The page the button opens. |

### Collapsible items block
| Setting | What it does |
| ---- | ---- |
| Icon source | Chooses where the icon comes from: Theme library, Custom image, or Custom SVG. |
| Theme library | The icon to show when Icon source is Theme library. Choose None for no icon. |
| Image | The icon image when Icon source is Custom image. Use a square image. |
| Custom SVG | The SVG code for the icon when Icon source is Custom SVG. The icon is shown at a fixed size. |
| Heading | The row title that customers click. |
| Description | The text that appears when the row opens. |
| Content from page | Adds the content of a page below the Description. See "Show content from a page" above. |

## Troubleshooting
**Icons don't show.**
Make sure **Show icons** is selected in the section settings. Then check the block's **Icon source**: with **Theme library**, the icon must not be None; with **Custom image** or **Custom SVG**, add the image or code.

**I can't add another row.**
Each section holds up to 10 collapsible items. To show more, add a second Collapsible content section, for example one for shipping and one for returns.

**The button doesn't show.**
The **Label** under **Button** is empty. Enter a label to show the button.

**Customers can't open two rows at once.**
This is how the section works: opening a row closes the row that was open.

## Related articles
- [What icons can you use on Electro theme](https://help.ecomx.co/en/article/electro-what-icons-can-you-use-on-electro-theme-hdw06b/)
- [How to edit Electro Page template](https://help.ecomx.co/en/article/electro-how-to-edit-electro-page-template-154imq0/)
- [How to use Electro Contact form](https://help.ecomx.co/en/article/electro-how-to-use-electro-contact-form-yudoyc/)
- [Electro Theme settings](https://help.ecomx.co/en/article/electro-theme-settings-2ubwqk/)