Accordion – Boostheme Help Center

Overview

The Accordion is a reusable theme block that allows you to create expandable and collapsible content groups.

It acts as a container, while Accordion Rows represent individual collapsible items inside the Accordion.

This block combination is commonly used for FAQs, product details, policies, and guides.

Where to use this block

You can add the Accordion block inside any section that supports nested theme blocks, such as:

Rich Collapsible Content section
Other advanced content sections

Block hierarchy (required)

Accordion blocks use the following hierarchical structure:

Section
└── Accordion
    └── Accordion Row
        └── Content blocks

⚠️ Important:
Accordion Rows and Content blocks must be added inside an Accordion block.
If the hierarchy is incorrect, content will not display.

Accordion block settings

These settings control the Accordion container.

Layout & spacing

Dividers
Show divider lines between accordion rows.
Row spacing
Controls the vertical spacing between rows.

Colors

Inherit color scheme
When enabled, the Accordion uses the parent section’s color scheme.
Color scheme
Available only when Inherit color scheme is disabled.

Width

Width (Desktop)
Fit content / Fill / Custom
Custom width (Desktop)
Sets the width as a percentage.
Width (Mobile)
Fit content / Fill / Custom
Custom width (Mobile)
Sets the width as a percentage.

Borders

Border style
None / Solid / Dashed
Thickness
Border thickness in pixels.
Border opacity
Controls border transparency.
Border radius
Rounds the Accordion corners.

Padding

Controls the inner spacing of the Accordion container:

Top
Bottom
Left
Right

Accordion Row (child block)

Accordion Rows represent individual collapsible items inside an Accordion.

Accordion Row settings

Heading
The title displayed for the accordion item.
This is the main text customers click to expand or collapse the row.
Icon
Optional icon displayed next to the heading.
Useful for visually indicating the type of content (FAQ, shipping, payment, etc.).
Open by default
Expands the row when the page loads.
Recommended to enable this for only one row to avoid clutter.

Content blocks (inside Accordion Row)

Inside each Accordion Row, you can add multiple content blocks, such as:

Rich text
Image
Video
Button
Divider
@app blocks

Content blocks can be reordered, duplicated, or removed as needed.

Tips

Keep row headings short and descriptive
Open only one Accordion Row by default
Use icons consistently for better visual clarity
Avoid placing too much heavy content inside a single row
Use Inherit color scheme for a cohesive look with the parent section

Where this block is commonly used

FAQ sections
Product details and specifications
Shipping, return, and warranty information
Help and guide content

Limitations

Accordion Rows must be nested inside an Accordion block
Rows without a heading will not display correctly
Overusing accordion items may reduce content visibility

Need help?

If the Accordion is not displaying correctly, review the block hierarchy and settings above, then contact your theme support team for assistance.