Accordion

Section + block documentation

What is an accordion?

An Accordion section or block displays stacked, expandable information tabs which can be used to display additional details, FAQs, step-by-step instruction, and more.

Accordions support multiple types of content: you can add and customize text, image, and/or video content; you can also dynamically import blog posts or pages directly into each block.

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row with image

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row with video

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Available blocks

An Accordion section only has one available block: the Row block.

Accordion row blocks can be added to Accordion sections or to the Product information section on product detail pages

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row

This block is far from limited in its customizable options. Add text, images, and video, or some combination of this content.

You can also import Blog post/Page details directly into individual Row blocks.

Learn more about the Row block here ⟶

Section settings

In addition to a number of standard section settings, the accordion contains certain settings built to specifically serve the accordion section functions. These are outlined below.

Add and customize text, image, and or video content or import details from a blog post or page directly into each row block.

Show full width

The Show full width setting will stretch the accordion row the full width of your page. Useful for sections with longer-form content, i.e. multiple paragraphs or images.

Accordion row

Accordion sections are more commonly used for easily consumable quantities of content,

The ability to add image or video along with relevant text to each individual Row block gives this section the potential to efficiently contain a substantial amount of content

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Enable sticky header

A checkbox to enable the "stickiness" of the header of the accordion section. If your accordion section has multiple rows, the heading will follow the scroll position of the visitor within the bounds of the section.

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Accordion row

Add relevant text content with the richtext editor. Note that you can also include links and basic formatting in this content, e.g. bold and italic.

Block settings

Accordion row blocks can be added to Accordion sections or to the Product information section on product detail pages.

Show open by default

An accordion block can be open by default by checking the Show open by default setting.

Accordion block

With the "Show open by default" setting activated, this block will appear expanded by default when the page loads.

Accordion block

The setting is not activated so this block will not expand unless manually triggered.

Use blog post or page content

Accordion blocks support selecting from published Blog posts or Pages to pull content directly into individual blocks. This will not pull content added via template, just body HTML from the actual post/page content.

If a post or page is selected, this content will overwrite any custom content set within the block itself.

Accordion using blog post content

This is an example blog post meant to demonstrate section and block features, like importing blog content directly into a section or block.

This content lives in the blog post's main content section, and can include text, images, video, custom html, and more.

View this as a post →

Company XYZ placeholder image

Accordion using page content

This is an example page meant to demonstrate section and block features, like importing page content directly into a section or block.

This content lives in the page's main content section, and can include text, images, video, custom html, and more.

View this as a post →

Company XYZ placeholder image

Imagery settings

Accordion blocks have the option to add an image or video to each individual block. This is set in the accordion block's Imagery settings.

Set the vertical alignment of the image/video to above or below any customized text content. You can also add an image/video to the block without any text.

If a block is assigned both an image and a video, the video settings will override the image settings.

Accordion block with image

Image files can be uploaded directly into the editor or selected from your Store library.

Set the image to appear above or below text content or alone in the block.

Accordion block with video

Video files can be uploaded directly into the editor, selected from your Store library, or by uploading a Vimeo or Youtube link.

Accordion videos have the same standard Video settings, including Autoplay, Loop, and Mute.

Accordion block with Vimeo video

Use the Video service url setting to pull video from a Vimeo link directly into the block.

Play video

Accordion block with Youtube video

Use the Video service url setting to pull video from a Youtube link directly into the block.

Play video

Accordion block with custom video poster

This image will display as the first frame of your video and will fade out when clicked.

This setting can be useful when pulling a video from an external link.

Standard settings

Some settings are available on most sections. View documentation for these standardized settings.

FAQs

chevron_left chevron_right
View all FAQs →