Feature Accordion
A two-panel section that pairs an accordion with a synced image gallery. Similar to the Detail Explorer, but designed for product features and specifications rather than outfit showcases. Each accordion row can have its own image that appears in the gallery when opened.
Configure the Section
- In the theme editor, click Add section.
- Select Feature accordion from the Interactive category.
- Add Feature row blocks — each row has a heading, an image, and space for child blocks.
Section Settings
Accordion
| Setting | Description |
|---|---|
| Icon style | Accordion toggle icon — Caret or Plus/minus. Default: Plus. |
| Auto-close other rows | When one row opens, close all others. Default: On. |
| Show dividers | Display divider lines between rows. Default: Off. |
| Place icon at end | Move the toggle icon to the right side. Default: Off. |
| Heading preset | Typography preset for row headings — Default or H1 through H6. Default: H6. |
Image
| Setting | Description |
|---|---|
| Image position | Gallery placement — Left or Right. Default: Right. |
| Border radius | Rounded corners on gallery images. Range: 0–32px. Default: 0. |
| Content alignment | Vertical alignment of the accordion panel — Top, Center, or Bottom. Default: Top. |
| Gap | Spacing between accordion and gallery. Range: 0–100px. Default: 32px. |
Layout
| Setting | Description |
|---|---|
| Width | Page width, Full width, or Custom (60–100%). Default: Page width. |
| Height | Auto, Full screen, or Custom (small/medium/large/custom input). Default: Auto. |
| Padding | Top and bottom padding. Range: 0–100px. Default: 32px. |
Row Block Settings
Each Feature row block supports:
| Setting | Description |
|---|---|
| Heading | Text displayed in the accordion summary. |
| Open by default | Whether this row starts expanded. Default: Off. |
| Image | The image shown in the gallery when this row is open. |
Child Blocks
- Text — Rich text with full styling options.
- Button — Call-to-action link.
- Custom Liquid — Inline Liquid code.
- App blocks — Third-party app content.
Responsive Behavior
On screens narrower than 750px, the section stacks vertically with the image on top and the accordion below.
Detail Explorer vs Feature Accordion
| Detail Explorer | Feature Accordion | |
|---|---|---|
| Media types | Images and videos with product links | Images only |
| Mobile layout | Instagram-style swipeable carousel | Stacked (image on top) |
| Image sizing | Fit or Fill modes, panel ratio controls | Simple cover mode |
| Best for | Outfit showcases, lookbooks | Product features, specifications |