Accordion
Block documentation
What is an accordion block?
The accordion block is an expandable and collapsible tab. This content container is used for FAQs, additional details, etc. It is extremely similar to the Row block, which is seen/used in the Accordion section.
Accordion blocks can only be added to the Product information section on product detail pages.
Accordion block
expand_more
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 text.
Accordion block settings
In addition to a number of standard block settings, the accordion block supports multiple types of content.
Add and customize text, image, and or video content or import details from a blog post or page directly into each block.
Show open by default
An accordion block can be open by default by checking the Show open by default setting.
Accordion block
expand_more
With the setting activated, this block appears expanded automatically when the page loads.
Accordion block
expand_more
The setting is not activated so this block will not expand unless manually triggered.
Accordion block + Blog post / Page
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 product detai lpage.
If selected, this product detail HTML content will overwrite any custom text content set within the same block.
In blocks assigned each type of content, Page settings will override Blog post and custom text settings.
An accordion can contain a single image or video in blocks also pulling in Blog post or Page content.
The blocks in this section demonstrate different options when using this block feature.
Test blog post
expand_more
This is a blog post. The post is meant to demonstrate Align section and block features, like importing this content into an Accordion block.
If an Accordion block is assigned this blog post, this content will be imported into the Accordion block, even if the post has a customized Blog post template. This can be used as summary or preview content for a post's main content.
Content can include richtext, images, video, and more.
Test page
expand_more
This is a page. The page is meant to demonstrate Align section and block features, like importing this content into an Accordion block.
If an Accordion block is assigned this page, this content will be imported into the Accordion block, even if the page has a customized Page template. This can be used as summary or preview content for a page's main content.
Content can include richtext, images, video, and more.
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 + Image
expand_more
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 + Video
expand_more
Video files can be uploaded directly into the editor, selected from your Store library, or by uploading a Video service url. Align supports Vimeo and Youtube links.
This video is from the site's media library
Accordion block + Vimeo
expand_more
Use the Video service url setting to pull video from a Vimeo link directly into the block.
Accordion block + Youtube
expand_more
Use the Video service url setting to pull video from a Youtube link directly into the block.
play_circle
Accordion block + Video poster image
expand_more
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.
play_circle
Accordion block + Video cont.
An accordion block that contains a video has a number of additional, customizable settings, including:
- Autoplay video
- Loop video
- Mute video
These settings can be used individually or combined within each accordion block. They can also all be set to inactive.
Accordion block + Autoplay video
expand_more
When activated, the video will automatically play when the block is expanded. If the block is open by default, the video will automatically play when a user scrolls to it.
Accordion + Loop video
expand_more
When activated, video content will play on a loop. Content will not play until manually triggered unless the Autoplay setting is also active.
Accordion + Mute video
expand_more
A video's audio will automatically play on mute, like in the video below. This is preset to active on every video and must be turned off manually.
Standard settings
View documentation outlining these standard settings
