Accordion panels
The Accordion Panels section is ideal for organizing content into collapsible panels.
- FAQs
- Product details
- Shipping info
- & more.
This format helps keep pages clean and easy to navigate, letting customers expand only the content they need.
Settings
| Setting | Description |
|---|---|
| Color scheme | Select a predefined color scheme. |
| Content container | See shared settings > Content container. Associated settings below. |
| Prelude | See shared settings > Prelude. Associated settings below. |
| Expand first panel | Show the first panel open when a user visits the store. |
| Collapse other panels on open | Only allow 1 panel to be open at any given time. |
| Panel style | Choose between Border between, Shaded, and Shaded every other to control the look and feel of the panels. |
| Label font | Choose between your theme’s body or heading font. |
| Label size | Adjust the label font size. |
| Content text size | Adjust the content font size. |
| Section spacing & border | See shared settings > Section spacing & border. Associated settings below. |
| Section animations | Animate section when scrolled into view. |
Shared settings
These settings are common to several sections and work the same way wherever they appear. Once you learn how they work in one place, you'll recognize them elsewhere.
Content container
These settings control the width and alignment of the content within the section.
| Setting | Description |
|---|---|
| Content max width | Choose whether the content spans the full width of the section, or use a custom width. |
| Custom width | When "Custom width" is selected, this sets the maximum content width in pixels. |
| Custom width container alignment | Controls how the custom-width content is aligned within the section: left, center, or right. |
Visual example.
Prelude
Use Prelude content to introduce your section. These settings allow you to add a heading, supporting text, and optional call-to-action buttons to introduce the section. Some sections may hide button settings if they aren’t relevant to the layout.
| Setting | Description |
|---|---|
| Alignment | Set the horizontal alignment of the prelude content. |
| Heading + Associated settings | Customize the section heading. Choose between your theme’s body or heading font, adjust the font size, and optionally display the text in all caps for extra emphasis. |
| Text + Associated settings | Customize the text, and size of your text to match your design. |
| Button + Associated settings | Customize the button label, add a button link, adjust the button size, and pick the button style. |
Visual example.
Spacing and border
The section Spacing & Border settings allow you to control how much vertical space line between your sections. Mix and match to find what works for you. Show a stylistic border between sections to emphasize the break between content.
| Setting | Description |
|---|---|
| Top spacing | How much spacing applies to the top of this section. |
| Bottom spacing | How much spacing applies to the bottom of this section. |
| Show bottom border | Show a stylistic border at the bottom of the section spacing |
Visual example.
Block - Panel
Each Panel block represents an individual accordion item with a heading and expandable content.
| Setting | Description |
|---|---|
| Panel label | The title of your panel item. |
| Icon | This dropdown lets you optionally choose from a curated set of icons that are designed to look great with your theme. |
| Panel content | This is the content that appears when the panel is expanded. |
| Desktop max content width | Control how wide the content appears on desktop screens. Use this to create a more focused layout or let content stretch wider across the page, depending on your design needs. |
