Skip to main content
The Accordions section organizes content into expandable and collapsible topics, ideal for FAQs, product details, policies, or any content that benefits from progressive disclosure. Accordions help reduce visual clutter and improve page scannability by allowing users to selectively reveal only the information they need. Add this section wherever you need organized, scannable content that doesn’t overwhelm first-time visitors.

​
What this section controls

This section controls expandable content displays with the following capabilities:
  • Multiple collapsible topic blocks with headings and content
  • Section title with customizable heading size
  • Four width options (Narrower, Narrow, Page width, Fluid)
  • Individual control for expanded/collapsed state on page load
  • Color scheme selection
  • Vertical spacing and border options

​
Section settings

Add a main heading displayed above the accordion list. Supports rich text formatting (bold, italic, links). Configure the heading size from XS to XL (default: XL).
Choose the container width for the accordion section:
  • Narrower — Most compact width for focused content
  • Narrow — Compact width ideal for text-heavy content
  • Page width — Standard container width
  • Fluid — Wider, edge-to-edge within padding
Default is Narrow for optimal reading experience.
Select the color scheme for the entire accordion section (default: scheme-1).
Control the vertical spacing above and below the section with options ranging from None to XL (0, S, M, L, XL). Default is M for both top and bottom spacing.
Add decorative borders to the section:
  • None (default) — No borders
  • Top — Border above the section
  • Bottom — Border below the section
  • Both — Borders above and below

​
Block: Topic

Create individual accordion items with expandable content.
Enable this checkbox to display the topic content expanded by default when the page loads. When disabled, the content remains hidden until users click the heading.Use this for the first or most important topic to demonstrate the accordion functionality.
Add the clickable heading text that users will see. This text appears in the collapsed and expanded states. Keep headings concise and descriptive (5-8 words maximum) for quick scanning.
Control the size of the individual topic heading:
  • XS, S, M, L, XL
  • Default: S
This is separate from the section title size, allowing visual hierarchy within the accordion list.
Add the main text content displayed when the topic is expanded. Supports rich text formatting for bold, italic, lists, and links.
Optionally select a Shopify page to output its content as the accordion body. This overrides the Content field when selected.
When a page is selected, it replaces any text entered in the Content field.
This is particularly useful for managing large or frequently updated information from a centralized page, such as detailed policies or legal content.

​
Default configuration

The section includes a preset with three example topics:
  • Shipping details (expanded by default)
  • Delivery details
  • Refund details
This provides a starting point for common e-commerce FAQ content.

​
Best practices

Concise headings

Keep topic headings to 5-8 words maximum for quick scanning and easy comprehension.

Default state

Avoid opening too many topics by default to maintain a clean initial page state. Consider expanding only the first item to demonstrate functionality.

Page content

Use the Page field for long or frequently updated information to simplify content management from a single source.

Logical grouping

Group related topics together and order them by importance or frequency of access.

Mobile testing

Test accordion interactions on mobile devices to ensure smooth expand/collapse animations and touch targets.

Consistent formatting

Use consistent text formatting within accordion content for a professional appearance.

​
Use cases

  • Frequently asked questions (FAQ) — Answer common customer questions in an organized, scannable format
  • Shipping and return policies — Display policy details without overwhelming the page
  • Product specifications — Show detailed technical information progressively
  • Size guides and charts — Provide measurement information that users can access when needed
  • Store information — Share operational details like hours, locations, and contact methods
  • Legal or informational content — Present terms of service, privacy policies, or guidelines
  • Product care instructions — Organize maintenance and care information by topic
  • Help and support sections — Create self-service support resources