Accordion Block

What This Block Does

The Accordion Block creates collapsible content sections that help organize information in a space-efficient way. Users can expand and collapse sections to view content, making it perfect for FAQs, product details, and any content that benefits from progressive disclosure.

Perfect for: FAQs, product specifications, shipping information, size guides, detailed descriptions, step-by-step instructions

How to Add It

Step 1: Add the Accordion Block

1. In your Shopify admin, go to Online Store → Themes
2. Click Customize next to your live theme
3. Navigate to any section that supports blocks
4. Click Add block and choose Accordion Block from the list

Step 2: Build Your Accordion

1. The accordion comes with one default accordion row
2. Add more accordion rows by clicking Add block → Accordion Row
3. Configure each row's title and content
4. Set up the accordion's behavior settings (exclusive mode, hover, etc.)

Step 3: Add Content to Rows

1. Click on each accordion row to configure it
2. Set the row title (what users click to expand)
3. Add content blocks inside each row (text, images, buttons, etc.)
4. Configure which rows should be open by default

Accordion Structure

The Accordion Block uses a parent-child relationship with two components:

Main Accordion Block

Controls the overall behavior and settings for all accordion rows.

Accordion Row Subblocks

Individual collapsible sections that contain your content.

Key Settings to Configure

Accordion Behavior Settings

Exclusive Mode: Control how many rows can be open simultaneously

• Enabled: Only one accordion row can be open at a time (classic accordion behavior)
• Disabled: Multiple rows can be open simultaneously
• When to use: Enable for FAQs where you want focus, disable for complex product info where users might want to compare multiple sections

Hover to Open: Control how users interact with the accordion

• Enabled: Accordion rows expand when users hover over them
• Disabled: Users must click to expand rows (default behavior)
• Best practice: Only enable for simple content that doesn't require scrolling

Auto Close: Automatic closing behavior

• Enabled: Rows automatically close after a set time
• Disabled: Rows stay open until manually closed
• When to use: Helpful for guided tours or step-by-step processes

Animation Speed: Control how fast rows expand and collapse

• Fast: Quick transitions for snappy interactions
• Normal: Balanced speed that feels natural
• Slow: Gentle transitions that draw attention to the animation

Accordion Group: Link multiple accordion blocks together

• Purpose: Coordinate behavior across multiple accordion blocks on the same page
• Usage: Enter the same group name for accordion blocks that should work together
• Example: If you have product details and shipping info in separate accordions, they can share exclusive behavior

Accordion Row Settings

Row Title: The heading text that users click to expand

• Best practice: Use clear, descriptive titles that indicate what content is inside
• Keep concise: Shorter titles work better on mobile devices
• Use action words: "View shipping details" vs "Shipping"

Open by Default: Control which rows start expanded

• When to use: Open the most important or frequently accessed information
• Limit usage: Don't open too many rows by default as it defeats the space-saving purpose

Row-Level Overrides: Customize individual rows differently from the parent settings

• Disable Exclusive: Allow this specific row to stay open even in exclusive mode
• Disable Hover: Prevent this row from responding to hover (click-only)
• Use cases: Important information that should always remain visible, or complex content that shouldn't respond to accidental hovers

Advanced Features

Accordion Groups

Link multiple accordion blocks to work together:

Group Name: "product-details"

• All accordions with the same group name coordinate their behavior
• Useful for splitting related content across multiple accordion blocks
• Maintains exclusive mode across the entire group

Progressive Disclosure

Use accordions to reveal information progressively:

1. Level 1: Basic product info (always visible)
2. Level 2: Detailed specifications (accordion)
3. Level 3: Technical documents (nested accordions)

Content Organization Strategies

FAQ Structure:

• Group related questions together
• Use exclusive mode to keep focus
• Open the most common question by default

Product Information:

• Separate basic info, specifications, and support
• Allow multiple sections open for comparison
• Use descriptive titles that preview the content

Pro Tips for Success

Design Best Practices

• Logical grouping: Organize related information together in the same accordion
• Scannable titles: Use titles that clearly indicate what's inside each section
• Content hierarchy: Put the most important information in the first few rows
• Mobile consideration: Test accordion behavior on mobile devices for usability
• Visual consistency: Keep similar content types in accordions for predictable UX

Common Mistakes

• Too many rows: Having 10+ accordion rows can overwhelm users
• Vague titles: Generic titles like "More Info" don't help users find what they need
• All rows open: Having everything expanded defeats the purpose of accordions
• Nested complexity: Avoid putting accordions inside accordion rows
• Poor content fit: Don't use accordions for content that users need to see simultaneously

Content Strategy

What Works Well in Accordions

• FAQs and help content
• Product specifications and details
• Shipping and return policies
• Size charts and fit guides
• Assembly instructions
• Ingredient lists and nutritional info

What to Avoid

• Critical purchase information (keep visible)
• Short content that doesn't need collapsing
• Content requiring comparison (unless multiple rows can be open)
• Navigation menus (use proper navigation instead)