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

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

In the theme editor, open the template where you want the section.
In the left sidebar, click Add section > Collapsible content.
Under General, enter a Section subheading, a Section heading, and a Section description. Leave a field empty to hide it.
Click a Collapsible item block.
Under Text, enter the question or topic in Heading, and the answer in Description.
To add more items, click Add block > Collapsible item.
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

In your Shopify admin, create the page in Online Store > Pages, for example your shipping policy.
In the theme editor, click a Collapsible item block.
Under Text, select the page in Content from page.
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

Click the Collapsible content section and check Show icons under Collapsible items.
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

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

Button

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

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.

Updated on: 26/10/2026

Was this article helpful?

Thank you!