Accordion Block

Auto-generate your docs

Overview

The Accordion block provides collapsible content panels that can contain any nested blocks. It consists of two components:

Accordion Container (accordion.liquid) - The parent wrapper with styling settings
Accordion Row (_accordion-row.liquid) - Individual collapsible rows

Accordion Container

Schema Definition

The accordion container only accepts accordion row blocks:

"blocks": [
  { "type": "_accordion-row" }
]

Container Settings

select

default:"caret"

Icon style for expand/collapse indicator

caret - Arrow icon
plus - Plus/minus icon

checkbox

default:"true"

Show divider lines between accordion rows

select

default:"h6"

Typography preset for accordion headings

“ - Default
paragraph - Paragraph style
h1 through h6 - Heading styles

checkbox

default:"true"

Inherit color scheme from parent section

color_scheme

default:"scheme-1"

Color scheme when not inheriting

Border Settings

select

default:"none"

Border style

none - No border
solid - Solid border

range

default:"1"

Border thickness (0-100px, visible when border is not “none”)

range

default:"100"

Border opacity (0-100%, visible when border is not “none”)

range

default:"0"

Border radius (0-100px)

Padding Settings

range

default:"0"

Top padding (0-100px)

range

default:"0"

Bottom padding (0-100px)

range

default:"0"

Left padding (0-100px)

range

default:"0"

Right padding (0-100px)

Accordion Row

Row Settings

text

default:"Accordion heading"

Text displayed in the row header

checkbox

default:"false"

Open this row by default on page load

Icon Settings

select

default:"none"

Optional icon displayed before the heading text. Supports 50+ icons including:

none - No icon
Social icons: facebook, instagram, twitter, youtube, etc.
E-commerce icons: cart, box, truck, return
Product icons: shirt, shoe, bottle, lipstick
General icons: heart, star, check_box, lightning_bolt

image_picker

Custom image icon (alternative to built-in icons)

range

default:"20"

Icon width (12-200px)

Liquid Implementation

Accordion Container

{% assign block_settings = block.settings %}

<div
  class="accordion accordion--{{ block.id }} accordion--{{ block_settings.icon }} border-style spacing-style{% if block_settings.dividers %} accordion--dividers{% endif %}"
  style="
    --summary-font-family: var(--font-{{ block_settings.type_preset }}--family);
    --summary-font-weight: var(--font-{{ block_settings.type_preset }}--weight);
    --summary-font-size: var(--font-{{ block_settings.type_preset }}--size);
    {% render 'spacing-style', settings: block_settings %}
    {% render 'border-override', settings: block_settings %}
  "
  {{ block.shopify_attributes }}
>
  {% content_for 'blocks' %}
</div>

Accordion Row

{% assign block_settings = block.settings %}

<accordion-custom
  {% if block_settings.open_by_default %}
    open-by-default-on-desktop
    open-by-default-on-mobile
  {% endif %}
>
  <details
    class="details"
    {% if block_settings.open_by_default %}open{% endif %}
    {{ block.shopify_attributes }}
  >
    <summary class="details__header">
      {% render 'icon-or-image',
        icon: block_settings.icon,
        image_upload: block_settings.image_upload,
        width: block_settings.width,
        class_name: 'details__icon'
      %}
      {{ block_settings.heading }}
      <span class="svg-wrapper icon-caret icon-animated">
        {{- 'icon-caret.svg' | inline_asset_content -}}
      </span>
      <span class="svg-wrapper icon-plus">
        {{- 'icon-plus.svg' | inline_asset_content -}}
      </span>
    </summary>

    <div class="details-content">
      {% content_for 'blocks' %}
    </div>
  </details>
</accordion-custom>

CSS Classes

Container Classes

.accordion - Main accordion wrapper
.accordion--dividers - Enables divider lines between rows
.accordion--caret / .accordion--plus - Controls which icon is visible
.border-style - Border styling
.spacing-style - Padding utilities

Row Classes

.details - Native HTML details element
.details__header - Clickable summary/header
.details__icon - Icon container
.details-content - Collapsible content area
.icon-animated - Animated expand/collapse icon

Preset Configuration

Default preset with three rows:

{
  "name": "Accordion",
  "blocks": {
    "row-1": {
      "type": "_accordion-row",
      "settings": {
        "open_by_default": true,
        "heading": "Return Policy"
      },
      "blocks": {
        "text-1": {
          "type": "text",
          "settings": {
            "text": "Our goal is to ensure every customer is satisfied...",
            "width": "100%"
          }
        }
      }
    },
    "row-2": {
      "type": "_accordion-row",
      "settings": {
        "heading": "Shipping"
      }
    },
    "row-3": {
      "type": "_accordion-row",
      "settings": {
        "heading": "Manufacturing"
      }
    }
  }
}

Usage Examples

Product FAQ Accordion

{
  "type": "accordion",
  "settings": {
    "icon": "plus",
    "dividers": true,
    "type_preset": "h5",
    "border": "solid",
    "border_radius": 8
  },
  "blocks": [
    {
      "type": "_accordion-row",
      "settings": {
        "heading": "What materials is this made from?",
        "icon": "leaf"
      }
    },
    {
      "type": "_accordion-row",
      "settings": {
        "heading": "How do I care for this product?",
        "icon": "washing"
      }
    }
  ]
}

Shipping Information

{
  "type": "accordion",
  "settings": {
    "icon": "caret",
    "type_preset": "h6"
  },
  "blocks": [
    {
      "type": "_accordion-row",
      "settings": {
        "heading": "Domestic Shipping",
        "icon": "truck",
        "open_by_default": true
      }
    },
    {
      "type": "_accordion-row",
      "settings": {
        "heading": "International Shipping",
        "icon": "plane"
      }
    }
  ]
}

Source Code Reference

Accordion Container: /source/blocks/accordion.liquid:1-312
Accordion Row: /source/blocks/_accordion-row.liquid:1-355

⌘I

Sections

Blocks

Snippets

Web Components

Accordion Block

Overview

Accordion Container

Schema Definition

Container Settings

Border Settings

Padding Settings

Accordion Row

Row Settings

Icon Settings

Liquid Implementation

Accordion Container

Accordion Row

CSS Classes

Container Classes

Row Classes

Preset Configuration

Usage Examples

Product FAQ Accordion

Shipping Information

Source Code Reference

​Overview

​Accordion Container

​Schema Definition

​Container Settings

​Border Settings

​Padding Settings

​Accordion Row

​Row Settings

​Icon Settings

​Liquid Implementation

​Accordion Container

​Accordion Row

​CSS Classes

​Container Classes

​Row Classes

​Preset Configuration

​Usage Examples

​Product FAQ Accordion

​Shipping Information

​Source Code Reference

Overview

Accordion Container

Schema Definition

Container Settings

Border Settings

Padding Settings

Accordion Row

Row Settings

Icon Settings

Liquid Implementation

Accordion Container

Accordion Row

CSS Classes

Container Classes

Row Classes

Preset Configuration

Usage Examples

Product FAQ Accordion

Shipping Information

Source Code Reference