> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Accordions

> Organize content into expandable topics for FAQs, policies, and product details

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

<AccordionGroup>
  <Accordion title="Section title">
    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).
  </Accordion>

  <Accordion title="Section width">
    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.
  </Accordion>

  <Accordion title="Color scheme">
    Select the color scheme for the entire accordion section (default: scheme-1).
  </Accordion>

  <Accordion title="Spacing">
    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.
  </Accordion>

  <Accordion title="Section border">
    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
  </Accordion>
</AccordionGroup>

## Block: Topic

Create individual accordion items with expandable content.

<AccordionGroup>
  <Accordion title="Show content on page load">
    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.
  </Accordion>

  <Accordion title="Topic heading">
    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.
  </Accordion>

  <Accordion title="Heading size">
    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.
  </Accordion>

  <Accordion title="Content">
    Add the main text content displayed when the topic is expanded. Supports rich text formatting for bold, italic, lists, and links.
  </Accordion>

  <Accordion title="Page">
    Optionally select a Shopify page to output its content as the accordion body. This overrides the Content field when selected.

    <Warning>
      When a page is selected, it replaces any text entered in the Content field.
    </Warning>

    This is particularly useful for managing large or frequently updated information from a centralized page, such as detailed policies or legal content.
  </Accordion>
</AccordionGroup>

## 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

<CardGroup cols={2}>
  <Card title="Concise headings" icon="heading">
    Keep topic headings to 5-8 words maximum for quick scanning and easy comprehension.
  </Card>

  <Card title="Default state" icon="eye">
    Avoid opening too many topics by default to maintain a clean initial page state. Consider expanding only the first item to demonstrate functionality.
  </Card>

  <Card title="Page content" icon="file">
    Use the Page field for long or frequently updated information to simplify content management from a single source.
  </Card>

  <Card title="Logical grouping" icon="layer-group">
    Group related topics together and order them by importance or frequency of access.
  </Card>

  <Card title="Mobile testing" icon="mobile">
    Test accordion interactions on mobile devices to ensure smooth expand/collapse animations and touch targets.
  </Card>

  <Card title="Consistent formatting" icon="text">
    Use consistent text formatting within accordion content for a professional appearance.
  </Card>
</CardGroup>

## 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