> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/layout/accordions.md).

# Accordions

Create collapsible question-and-answer rows, product details, policy notes, or compact content groups.

The **Accordions** block displays content in collapsible rows, so customers can open the details they need without scrolling through a long wall of text. Use it for FAQs, product details, shipping policies, size guidance, ingredients, care instructions, or any repeated information that should stay tidy until a customer chooses to read it.

### 1. What you can do

* Add, duplicate, remove, and reorder Accordion item rows
* Set the Accordion width to fill its container or use a custom width
* Choose underline or boxed item styling
* Control row size, heading typography, content typography, icon size, spacing, corner radius, and padding
* Show row order numbers
* Open selected rows by default
* Use separate row sizing and spacing on mobile
* Add padding and margin around the full Accordion block

### 2. Understanding the Accordion structure

The Accordions contains one private child type:

```
Accordions
`-- Accordion
```

**Accordion** is designed specifically for the Accordion block. Add one Accordion item for each question, detail, or content row you want customers to open.

### 3. How to add an Accordions block

{% stepper %}
{% step %}
**Open a compatible section**

In the Theme Editor (Customize), open a compatible section or container.
{% endstep %}

{% step %}
**Add an accordion block**

Click **Add block**, then select **Accordions**.
{% endstep %}

{% step %}
**Edit accordion items**

Open each **Accordion** and replace the heading and content.
{% endstep %}

{% step %}
**Manage accordion items**

Add, duplicate, remove, or reorder Accordion items as needed.
{% endstep %}

{% step %}
**Configure the accordion settings**

Choose the width, item style, sizing, and mobile behavior.
{% endstep %}

{% step %}
**Preview the accordion**

Check how it looks on desktop and mobile.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

### 4. Accordions settings

<details>

<summary>Layout</summary>

Layout controls set the width of the full Accordions and, when using boxed items, the spacing between rows.

<table><thead><tr><th width="94.67578125">Setting</th><th width="129.65625">Options</th><th width="458.50390625">What it does</th></tr></thead><tbody><tr><td><strong>Width</strong></td><td><ul><li>Fill</li><li>Custom</li></ul></td><td><ul><li><strong>Fill</strong> stretches the Accordion to fill the available container width.</li><li><strong>Custom</strong> lets you set a precise Accordion width in pixels or as a percentage.</li></ul></td></tr><tr><td><strong>Gap</strong></td><td><ul><li>Default</li><li>0–40px</li><li>Custom</li></ul></td><td>Sets the space between Accordion items. <em>Available when <strong>Style</strong> is <strong>Boxed</strong>.</em></td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to set a separate boxed-item gap for mobile screens. <em>Available when <strong>Style</strong> is <strong>Boxed</strong>.</em></td></tr></tbody></table>

</details>

<details>

<summary>Style</summary>

Style controls change how every Accordion item looks. For store-wide font setup and typography guidance, see [Typography](/arctos-theme/theme-settings/typography.md).

<table data-search="false"><thead><tr><th width="122.94140625">Setting</th><th width="156.5546875">Options</th><th width="433.3046875">What it does</th></tr></thead><tbody><tr><td><strong>Inherit color scheme</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><ul><li>Turning this <strong>On</strong> matches the Accordion colors to the section or block it sits in.</li><li>Turning it <strong>Off</strong> lets you pick a unique color scheme to make the Accordion stand out.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Color scheme picker</td><td>Use the picker to select a color scheme set in <a href="/arctos-theme/theme-settings/colors.md">Theme settings > Colors</a>. <em>Only available when <strong>Inherit color scheme</strong> is off.</em></td></tr><tr><td><strong>Style</strong></td><td><ul><li>Underline</li><li>Boxed</li></ul></td><td><ul><li><strong>Underline</strong> keeps rows minimal, with a divider-style treatment that works well for FAQ lists and compact text sections.</li><li><strong>Boxed</strong> places each row in a stronger container, useful when the Accordion should read like a set of cards or panels.</li></ul></td></tr><tr><td><strong>Box style</strong></td><td><ul><li>Fill</li><li>Outline</li></ul></td><td><ul><li><strong>Fill</strong> gives boxed rows a solid background.</li><li><strong>Outline</strong> shows a border with no solid background.</li></ul><p><em>Available when <strong>Style</strong> is <strong>Boxed</strong>.</em></p></td></tr><tr><td><strong>Size</strong></td><td><ul><li>Small</li><li>Medium</li><li>Large</li><li>Custom</li></ul></td><td><p>Sets the overall row scale.</p><ul><li>Use <strong>Small</strong> for dense informational lists</li><li><strong>Medium</strong> for balanced layouts</li><li><strong>Large</strong> for more prominent rows.</li><li>Choose <strong>Custom</strong> when you need to fine-tune related row controls such as <strong>Heading text style</strong>, <strong>Content text style</strong>, <strong>Icon size</strong>, row <strong>Gap</strong>, boxed <strong>Corner radius</strong>, row padding, or custom typography.</li></ul></td></tr><tr><td><strong>Item indicator</strong></td><td><ul><li>All devices</li><li>Desktop only</li><li>Mobile only</li><li>None</li></ul></td><td>Controls whether an indicator appears next to the Accordion heading, and on which devices.</td></tr><tr><td><strong>Type</strong></td><td><ul><li>Order number</li><li>Icon</li></ul></td><td>Choose whether the indicator shows an <strong>Order number</strong> (useful for steps or ranked lists) or an <strong>Icon</strong>. <em>Available when <strong>Item indicator</strong> is not None.</em></td></tr><tr><td><strong>Disable other items on hover</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Makes the hovered Accordion item the visual focus while customers move through the list. Use it when you want stronger emphasis on the row being explored.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to set a separate mobile <strong>Size</strong>. Choose mobile <strong>Custom</strong> when the mobile row needs its own related controls, such as mobile heading and content text styles, icon size, row gap, boxed corner radius, row padding, or custom typography.</td></tr></tbody></table>

</details>

<details>

<summary>Spacing</summary>

<table><thead><tr><th width="113.93359375">Setting</th><th width="192.8046875">Options</th><th width="376.0625">What it does</th></tr></thead><tbody><tr><td><strong>Padding</strong></td><td>Custom value per side</td><td>Sets the spacing between the block and its surrounding edge.</td></tr><tr><td><strong>Margin</strong></td><td>Custom value per side</td><td>Sets the spacing around the block to separate it from neighboring blocks.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Set separate padding and margin values for mobile.</td></tr></tbody></table>

</details>

### 5. Accordion settings

Each **Accordion** controls one collapsible row. Accordion items are private to the Accordion block and are documented here rather than as separate reusable blocks.

<table><thead><tr><th width="104.30859375">Setting</th><th width="131.54296875">Options</th><th width="522.10546875">What it does</th></tr></thead><tbody><tr><td><strong>Heading</strong></td><td>Text field</td><td>Sets the collapsed row title customers see before opening the item. Use a short question, product detail label, or clear topic name.</td></tr><tr><td><strong>Content</strong></td><td>Rich text field</td><td>Adds the content customers see after opening the item. Use it for answers, policy details, product notes, care instructions, or any supporting copy that should stay hidden until needed.</td></tr><tr><td><strong>Expand by default</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Opens this Accordion item when the page first loads. Turn it on for the most important answer or for a row customers should notice immediately.</td></tr><tr><td><strong>Source</strong></td><td><ul><li>Library</li><li>Upload</li></ul></td><td><p>Select the source of the icon displayed for this row.</p><ul><li>Library: Choose an icon from the built-in library</li><li>Upload: Upload a custom image to use as the icon</li></ul><p><em>Only visible if the Accordion block's <strong>Type</strong> is set to <strong>Icon</strong>.</em></p></td></tr></tbody></table>