Skip to main content

​
Overview

The Accordion block provides collapsible content panels that can contain any nested blocks. It consists of two components:
  1. Accordion Container (accordion.liquid) - The parent wrapper with styling settings
  2. 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

​
icon
select
default:"caret"
Icon style for expand/collapse indicator
  • caret - Arrow icon
  • plus - Plus/minus icon
​
dividers
checkbox
default:"true"
Show divider lines between accordion rows
​
type_preset
select
default:"h6"
Typography preset for accordion headings
  • “ - Default
  • paragraph - Paragraph style
  • h1 through h6 - Heading styles
​
inherit_color_scheme
checkbox
default:"true"
Inherit color scheme from parent section
​
color_scheme
color_scheme
default:"scheme-1"
Color scheme when not inheriting

​
Border Settings

​
border
select
default:"none"
Border style
  • none - No border
  • solid - Solid border
​
border_width
range
default:"1"
Border thickness (0-100px, visible when border is not “none”)
​
border_opacity
range
default:"100"
Border opacity (0-100%, visible when border is not “none”)
​
border_radius
range
default:"0"
Border radius (0-100px)

​
Padding Settings

​
padding-block-start
range
default:"0"
Top padding (0-100px)
​
padding-block-end
range
default:"0"
Bottom padding (0-100px)
​
padding-inline-start
range
default:"0"
Left padding (0-100px)
​
padding-inline-end
range
default:"0"
Right padding (0-100px)

​
Accordion Row

​
Row Settings

​
heading
text
default:"Accordion heading"
Text displayed in the row header
​
open_by_default
checkbox
default:"false"
Open this row by default on page load

​
Icon Settings

​
icon
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_upload
image_picker
Custom image icon (alternative to built-in icons)
​
width
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

Build docs developers (and LLMs) love

Get started for freeTalk to us