Accordion

Helpful links

1. https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit/theme-editor

2. https://help.shopify.com/en/manual/online-store/themes/theme-structure/templates

3. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks

4. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks#metafields-and-dynamic-sources

Reference videos

Overview

The Accordion section allows you to break up large amounts of content into clear, expandable rows, giving users easy, interactive access to information without overwhelming them. This makes it an excellent choice for displaying FAQs, step-by-step instructions, or detailed product or policy information. By providing expand/collapse controls, the Accordion creates a tidy and engaging content experience.

Visitors can focus only on the information they need, while you can keep your page visually streamlined and efficient.

⚠️ Important: Use the Accordion section to make content-rich areas more accessible and to improve navigation in long or detailed pages.

Key components and functionality

General settings

These settings control basic structure, content layout, and header behavior, which all help define the presentation and interactivity of the Accordion section.

Content position

Choose how the main content is arranged in the section.

1. Left – Position content to the left side.

2. Right – Position content to the right side.

   1. Default: right

3. Full width – Stretch content across the full width above or within the accordion.

Enable sticky header

Enabling the sticky header keeps the section header visible at the top of the screen as visitors scroll through the rows, maintaining a sense of place on the page.

Default: enabled (sticky header on)

Sticky headers improve navigation when users browse longer forms of content.

Dynamic content

Dynamic content settings add automation by letting the Accordion pull in content from your blog or tagged posts. This keeps your content fresh with less manual effort and ensures that visitors see the latest additions.

You can:

1. Select a blog to serve as the source for accordion content.

2. Enter a tag to filter and display only posts with that tag.

3. Choose the number of items (rows) to display.

   1. Options range from 0 to 50, step 1.

   2. Default: 0 (no dynamic content).

4. Optionally display an excerpt with each item.

   1. Default: disabled (excerpts hidden).

5. Optionally add a call-to-action link, such as "Read more" or "View article."

6. Set sorting preferences for your dynamic content:

   1. Sort by either title or date published.

   2. Choose ascending or descending order for display.

This is a flexible way to keep your page up to date with minimal ongoing work.

Supported block types

The Accordion section makes use of Row blocks. Each Row represents one expandable/collapsible area inside your accordion.

1. Rows can include:

   1. Headings and descriptive content with rich formatting.

   2. Optional icons for visual accents or context.

   3. Images, video, or buttons to enhance the experience.

2. Configure Row blocks individually, or allow dynamic content to inject rows automatically.

You start with three ready-made Row blocks, and can add, remove, or reorder as needed for your content.

📝 Note: Mix static and dynamic rows for a highly customized and interactive user experience.

Usage notes

1. Keep the number of rows manageable, especially when using images or videos, to maintain fast page loads and a clean look.

2. Optimize images and media for both desktop and mobile devices, keeping file sizes as small as possible.

3. Confirm that sticky headers behave well across all device sizes—review both desktop and mobile layouts.

4. Always use clear, descriptive headings and consider adding icons for better accessibility and guidance.

5. Preview your Accordion section on multiple browsers and devices to ensure a consistent and reliable presentation.

💡 Tip: A streamlined, well-organized Accordion section not only improves engagement but reduces bounce rates by making your information easier to find and interact with.