Accordion And Tabs Blocks
Use Accordion and Tabs blocks when customers need structured information without a long uninterrupted text area.
Included Blocks
| Block | Use |
|---|---|
| Accordion | Stacks expandable rows for FAQ, policies, care, fit, shipping, or technical details. |
| Tabs | Switches between panels when the content groups are peers, such as Description, Details, and Shipping. |
Setup Order
- Choose the patternUse Accordion for independent questions or expandable details. Use Tabs for a small set of equally important content groups.
- Add rows or panelsAdd accordion rows or tab panels with clear titles and concise content.
- Tune behaviorFor accordions, choose caret or plus icons and whether opening one row automatically closes the others.
- Review mobileConfirm titles wrap cleanly and content remains readable on small screens.
Accordion Settings
| Setting | Description |
|---|---|
| Icon | Choose caret or plus row indicators. |
| Automatically close other rows | Keeps only one row open at a time. |
| Dividers | Adds row separation. With Numbered rows enabled, separators are dashed; turn Dividers off to hide them. |
| Numbered rows | Where available in your installed version, adds automatically ordered number badges and generous row spacing. Off by default on an existing Accordion; enabled in the FAQ – numbered preset. |
| Place icon at end | Moves the icon to the right edge. |
| Typography | Controls row title style, custom font, size, line height, and letter spacing. |
| Colors and borders | Override global colors, background, text, border, radius, and padding. |
Questions and Initial State
An Accordion contains Accordion row blocks. Edit each row’s heading for the question, and edit its child Text block for the answer. Each row also has Open by default and optional leading icon/image controls; the leading icon is separate from the Caret or Plus toggle indicator.
Keep Automatically close other rows when one opens enabled for one open answer at a time, or disable it to allow several. Choose at most one Open by default row when automatic closing is enabled.
The optional FAQ – numbered preset combines these same blocks with an introduction, link, and image. Availability depends on your installed theme version. See the FAQ setup guide for the layout and image/link setup.
In versions with the updated editor behavior, selecting a row or its answer opens it in the editor preview without changing its saved initial state. Verify Open by default in the ordinary storefront preview.
Tabs Settings
| Setting | Description |
|---|---|
| Tab panels | Child panels that hold each tab’s title and content. |
| Typography | Controls tab label style and optional uppercase transform. |
| Colors and borders | Override global colors, border, radius, and padding. |
Choosing Between Accordion And Tabs
| Situation | Better choice |
|---|---|
| Many independent questions | Accordion |
| Long policy or care entries | Accordion |
| Three or fewer peer categories | Tabs |
| Customers need to compare all headings quickly | Accordion |
| Content must stay compact above the fold | Tabs or short accordion |
QA Checklist
| State | What to confirm |
|---|---|
| Keyboard | Rows or tabs can be reached and activated from the keyboard. |
| Long titles | Titles wrap without covering icons. |
| Auto-close | The accordion open behavior matches the information type. |
| Empty panels | No blank row or tab appears in published content. |
| Mobile | Content does not push purchase or CTA blocks too far away when expanded. |