Keystone Documentation

Appearance

Accordion ​

Display collapsible sections with a title and content to share information without adding customer input fields.

Overview ​

Accordion is a static option type that shows a clickable title and expandable content. Customers can expand and collapse the section to read more details, while keeping the product page clean and easy to scan.

Use Accordion for:

  • Frequently asked questions (FAQ)
  • Instructions (how to measure, how to personalize, how to care for a product)
  • Shipping, returns, and policy information
  • Extra context for other options
  • Long explanations you don’t want to show fully by default

Key characteristics:

  • Static content (no customer input captured)
  • Cannot be marked as required
  • No pricing and no value is added to cart
  • Contains a Title and Content
  • Label can be shown or hidden on the storefront

Configuration ​

Basic Settings ​

SettingDescription
LabelOption name (shown in admin and optionally on storefront)
Hide Label from storefrontIf enabled, only the accordion section is shown (label is hidden)

Advanced Settings ​

SettingDescription
Internal LabelAdmin-only identifier (replaces label in options list)
Help TextAdditional context (appears based on display mode setting)

Accordion Settings ​

SettingDescription
TitleThe accordion header customers click (e.g., "Shipping & Returns")
ContentThe text shown when the accordion is expanded

How to Add Accordion ​

  1. Navigate to Option Sets and open your option set
  2. Click Add Option
  3. Select Accordion from the Option Type dropdown
  4. Enter a Label (or hide it if you only want the accordion shown)
  5. Configure Accordion Settings:
    • Enter Title
    • Enter Content
  6. (Optional) Click Advanced Settings to add Internal Label
  7. Click Save in the contextual save bar

Use Cases ​

FAQ Item ​

Label: (Hidden) Title: Can I return custom items? Content: Custom items are final sale unless they arrive damaged or incorrect.

Result: Customers can find answers without leaving the product page.

Measurement Instructions ​

Label: (Hidden) Title: How to measure Content: Use a soft measuring tape and measure around the widest part. If you’re between sizes, we recommend sizing up.

Result: Reduces confusion and improves sizing accuracy.

Policy Details ​

Label: Policies Title: Shipping & Returns Content: Orders ship within 2–3 business days. Returns are accepted within 14 days for non-custom items.

Result: Important policy info is available without overwhelming the page layout.

Styling ​

Accordion inherits styling from your theme and customization settings:

For deeper control — layout mode, header states, expand icon, animation, and more — create a dedicated Accordion template. See Accordion Styling.

Best Practices ​

Keep titles short and clear:

  • Make the title scannable (customers decide to expand based on the title)
  • Use consistent phrasing across multiple accordion sections

Keep content easy to read:

  • Use short paragraphs
  • Split long topics into multiple accordion sections instead of one large block

Hide the label in most cases:

  • The accordion title is already visible on the storefront
  • Hide the label to avoid duplicate headings (unless you want a section label above multiple items)