Where to find it
In Online Store → Themes, open the unpublished theme editor, choose a compatible template, then Add section → Accordion. Availability follows the selected template and section group.
This section is not available in the Header group.
Set it up
- Add an Accordion item for each topic and give it a short, distinct Heading. Caption adds context beneath the heading.
- Inside each item, add the content blocks you need, such as Rich text, Image or Button. The item heading alone does not supply its expanded content.
- Choose Layout and Item style, then adjust Content width and the space between items.
- Choose whether several items may stay open together. Set Open by default on individual Accordion items and review the resulting opening state.
Main settings to review
| Setting | Choices or control |
|---|---|
| Layout | One column · Two columns |
| Item style | Divided · Bordered · Surface |
| Allow multiple items open | On / Off |
| Indicator style | Plus · Chevron |
| Content width | 30–100 %; step 5 |
Blocks and content
This section allows up to 12 direct blocks. Nested blocks have their own parent-specific choices and limits.
The following content blocks have their own setup and control reference. Nested blocks belong inside their parent, such as Slide, Tab, Tile or Story chapter.
Content and media
- Images are optional. Give nested Image blocks meaningful alt text and use a ratio that suits the information being explained.
Check the mobile layout
- Check long item headings, expanded content and nested buttons on a narrow screen. Two-column compositions need a separate mobile preview.
Common questions and fixes
- An item opens without content: add child content blocks inside that Accordion item.
- Items close unexpectedly: review Allow multiple items open and the opening state of each item.
Full control reference
Names, choices, ranges and defaults below are read from this version of the theme. Defaults are starting examples, not promises about your business. Some controls appear only for the matching layout. Block contents and preset starting values can differ from the base defaults.
All section controls (27)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Width / Section width | Page width · Full width · Custom width | Default: Page width. |
| Width / Custom width | 50–100 %; step 5 | Default: 80. Percentage of screen width. This control appears only when the relevant layout or related option is selected. |
| Heading / Text above heading | Text | Default: Not set. |
| Heading / Heading | Text | Default: Helpful information. |
| Heading / Text | Formatted text | Default: Organize detailed content into clear, expandable sections.. |
| Heading / Heading alignment | Left · Center · Right | Default: Left. |
| Heading / Content width | 30–100 %; step 5 | Default: 80. Percentage of page width on desktop. Mobile uses 100%. |
| Layout / Layout | One column · Two columns | Default: One column. |
| Layout / Item style | Divided · Bordered · Surface | Default: Bordered. |
| Layout / Gap between items | 0–40 px; step 2 | Default: 12. This control appears only when the relevant layout or related option is selected. |
| Layout / Corner radius | 0–48 px; step 2 | Default: 8. This control appears only when the relevant layout or related option is selected. |
| Layout / Heading padding | 8–48 px; step 2 | Default: 16. |
| Layout / Content padding | 0–48 px; step 2 | Default: 16. |
| Layout / Content gap | 0–48 px; step 4 | Default: 16. Space between content blocks inside each Accordion item. |
| Behavior / Allow multiple items open | On / Off | Default: On. |
| Behavior / Show indicator | On / Off | Default: On. |
| Behavior / Indicator style | Plus · Chevron | Default: Plus. This control appears only when the relevant layout or related option is selected. |
| Section / Color scheme | Choose a color scheme | Default: background. |
| Section / Top padding | 0–160 px; step 4 | Default: 48. |
| Section / Bottom padding | 0–160 px; step 4 | Default: 48. |
| Media / Section background image | Choose an image | Default: Not set. |
| Media / Section background position | Image focal point · Top · Center · Bottom | Default: Image focal point. This control appears only when the relevant layout or related option is selected. |
| Media / Section background behavior | Scroll with section · Fixed to viewport | Default: Scroll with section. This control appears only when the relevant layout or related option is selected. |
| Media / Section background overlay | 0–80 %; step 5 | Default: 0. This control appears only when the relevant layout or related option is selected. |
| Advanced / Hide on desktop | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Hide on mobile | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Section anchor | Text | Default: Not set. Optional. Use a unique name for links that jump to this section. |