Accordion

Create expandable sections for organized FAQs, product information, or multimedia content with collapsible panels, custom buttons, images, and videos—ideal for keeping pages clean, interactive, and user-friendly on any device.

Last updated About 2 months ago

Overview

The Accordion block creates collapsible sections that organize text, visuals, and action elements on your pages. This block is a powerful way to present expandable content such as FAQs, guides, or detailed product information, letting visitors reveal or hide what interests them most. Using this organized layout keeps your pages visually clean and helps users access all relevant details efficiently.

📝 Note: The Accordion block is ideal for interactive content, offering advanced ways to manage dense information and provide a better browsing experience.

Available in sections

You can add the Accordion block to these sections:

  1. Product information

Key components and functionality

Settings for the Accordion block are grouped to give you clear, flexible control over all block content. Adjust content, calls to action, visuals, and responsive visibility to fit your goals.

Content settings

Content settings control your main text, headings, icons, and related links for the Accordion block. Use these to structure interactive content and direct visitors to additional details quickly.

  1. Show open by default
    Set whether the accordion is expanded when the page loads. The default is collapsed.

  2. Show link to content
    Enable this to add a dynamic link to a blog post or a page for deeper information.

    1. Blog post lets you select a relevant article as the link target.

    2. Page allows you to link to any static site page.

    3. Show excerpt in accordion will display a preview from the selected article below the heading.
      Default: off

  3. Heading icon
    Add an icon or emoji to highlight the accordion heading, improving visual cues for your content.

  4. Heading
    Set the main heading or title for this block.
    Default: Accordion

  5. Content
    Enter the main body text for your accordion. This supports links, bold, and italic formatting for rich presentation.
    Default: 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.

Call-to-action settings

Call-to-action (CTA) options allow you to shape engagement by controlling button design, icon use, text labels, and links. Guide users to the next step with eye-catching buttons that drive key actions.

  1. Button icon
    Add a graphic or icon to your CTA button for extra emphasis.

  2. Button text
    Enter the button’s label. If left blank, the button will use only an icon.

  3. Button link
    Set the destination URL for your button.

  4. Button style
    Choose how your button appears for best fit:

    1. Primary

    2. Secondary

    3. Extra large

    4. Plain

    5. Small

    6. Small secondary

    7. Circle

  5. Button layout
    Select how the icon and text are arranged on your button:

    1. Icon left

    2. Icon right

    3. Icon only

Imagery and video settings

Add visual impact to your Accordion block with embedded images or videos. This enhances engagement, clarifies information, and provides richer storytelling.

Introductory description

Media settings let you pair visuals with your content. Configure position, size, and playback features to best support your message and brand look.

  1. Imagery layout
    Choose whether your media sits at the top or bottom of the accordion’s content.
    Default: bottom

  2. Image
    Upload or select an image to help illustrate your message.

  3. Video service URL
    Embed video from YouTube or Vimeo to show dynamic content.

  4. Shopify-hosted video
    Use a directly hosted video for maximum control over appearance and playback.

  5. Video poster image
    Set a static image as a thumbnail before your video loads or plays to improve load time and appearance.

  6. Aspect ratio
    Pick the shape for your image or video:

    1. Default

    2. Landscape

    3. Portrait

    4. Square

    5. Ultrawide

    6. Widescreen Default: default

  7. Autoplay video
    Choose to autoplay the video when it becomes visible.

  8. Loop video
    Let videos repeat automatically for ongoing demonstrations.

  9. Mute video
    Decide if videos should start without audio.
    Default: on

  10. Show video player controls
    Give users access to play, pause, and adjust video playback.
    Default: on

Visibility settings

Control when and where your Accordion block appears by device type, keeping user experience tailored and focused.

Introductory description

Fine-tune block visibility so it shows only to your desired audience, adapting your site’s content for mobile or desktop as needed.

  1. Visibility
    Set device-specific display rules for your block:

    1. Do not hide (block is always shown)

    2. Hide on desktop

    3. Hide on mobile
      Default: do not hide

Usage notes

  1. Use clear, descriptive headings for each accordion to help visitors scan content quickly.

  2. Keep body content concise and leverage the excerpt feature for summaries.

  3. Prioritize sharp images and always assign a poster image to every video for better performance.

  4. Write direct button labels and double-check every link for usability.

  5. Use visibility controls to ensure the block appears where it’s useful, such as hiding it on mobile for lengthy answers.

  6. Default videos to mute and loop thoughtfully to balance engagement with user control.

⚠️ Important: For accessibility, always include descriptive alt text for images, make your content concise, and confirm that all Accordion blocks work on every device. Muting video by default helps avoid disrupting the browsing experience, especially for a global audience.

The Accordion block is easy to set up yet powerful in function. By combining collapsible content panels, embedded media, and action-focused CTAs, this block lets you build organized, attractive, and highly usable pages.