Accordion
The section is designed to organize and present content in a clean, structured, and interactive format.
It allows you to display multiple pieces of information within expandable panels, helping visitors easily navigate through details without overwhelming them with large blocks of text.
This section is especially useful for storytelling and informational content, where clarity and readability are essential. You can use it to explain brand values, describe product materials, outline policies, or share frequently asked questions — all within a visually tidy layout.
On the storefront, the Accordion enhances the user experience by allowing customers to expand only the topics that interest them. This keeps the page concise, mobile-friendly, and easy to read.
In short, the Accordion is an effective way to structure longer content and make your story more accessible, engaging, and organized.
Location: Sections -> Templates -> Storytelling: Accordion
Accordion – Options Overview
Open all tabs
Enables all accordion tabs to be open in the admin panel for easier content editing. Animations do not apply in this mode.
Heading
Subheading
Allows adding a secondary heading above the main accordion title for additional context.
Heading
Sets the main title of the accordion section.
Accordion
Defines the individual accordion tab titles.
Description
Adds the content displayed inside each accordion tab.
Heading alignment
Left, Center – Adjusts the alignment of headings within the section.
Layout
Top spacing
None, Small, Medium, Normal – Adjusts the vertical spacing above the section.
Width
Default, Boxed, Wide – Sets the section width. The Wide option works for screens 1440px and larger.
Image
Image display
Hide, Show – Controls whether images are displayed in the accordion section.
Image hover effect
Basic theme settings: Disable, Zoom in #1, Zoom in and rotate, Zoom in #2, Zoom out #1, Zoom out #2, Slide, Shine – Determines hover animation for images.
Image ratio
Auto, Portrait (3:4), Landscape (4:3), Square (1:1), Round (1:1), Social story (9:16), Widescreen (16:9) – Sets the aspect ratio of images.
Image
Selects the image to display in the section.
Align text relative to image
Top, Center – Adjusts vertical alignment of text relative to the image.
Swap content
Enables swapping the position of text and image within the section.
Content width
25-75% – Sets the width ratio of content relative to the image.
Accordion
Disable accordion
Turns off the accordion behavior, showing all content expanded by default.
Dividing line
Show
Toggles a dividing line above or below the section for visual separation.
Background
Background
Hide, Color, Gradient, Image – Determines the type of background for the section.
Colors
Base
Sets the primary color for text, background, or elements in the section.
Accent
Defines an accent color for highlights or interactive elements.
Lines
Adjusts the color of dividing lines or subtle design accents.
Button
Show background
Enables background display for buttons.
Background
Sets the button’s background color.
Background gradient
Allows a gradient background for the button.
Border
Sets the border color of the button.
Text
Defines the text color on the button.
Show background on hover
Toggles background visibility when hovering over the button.
Background hover
Sets the button background color on hover.
Background gradient hover
Allows a gradient background on hover.
Border hover
Sets the border color of the button when hovered.
Text hover
Defines the button text color on hover.
Enable shadow
Toggles shadow effect for the button.
Shadow
Sets the shadow style for the button.
Shadow hover
Sets the shadow style when the button is hovered.
Text - options overview
The Text subsection allows you to add multiple text blocks inside each accordion tab. It is designed to provide detailed answers, explanations, or information in a clear, organized way. You can add as many text blocks as needed to fully communicate your message to customers.
Heading
Sets the title for the text block, typically used as a subheading within the accordion tab.
Frequently asked question
Allows you to enter a common question that the text block will answer.
Description
Use this field to provide detailed information or responses to the question for your customers.
Button
Name
Sets the text displayed on the button. To remove the button, leave this field blank.
Link
Defines the URL the button will direct customers to when clicked.
Last updated