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.

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:
4. • 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.

Settings reference

General

Layout

Collapsible items

Image

Button

Collapsible items block

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
• How to edit Electro Page template
• How to use Electro Contact form
• Electro Theme settings

Updated on: 02/11/2026