# Accordion

The **Accordion** block is designed to display collapsible content sections, helping merchants organize detailed information in a compact and user-friendly way. Ideal for FAQs, product details, shipping policies, and more.

<figure><img src="/files/TzMAV4s3VFLrvcOz93VY" alt="Gif depicting the Accordion block of the product pages section"><figcaption></figcaption></figure>

Additionally, the GIF above is displaying one of our newer design settings for the accordion block, which allows you to have it open in a drawer mode, much like our "cart drawer". However if that is not to your liking, you can always choose the normal collapsible design as displayed by the example below.

<figure><img src="/files/zvJNqDjoTKzJPQP7s1WB" alt="Image depicting the Accordion block settings"><figcaption></figcaption></figure>

<table><thead><tr><th width="210.9444580078125">Settings</th><th width="156.45916748046875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Style</td><td align="center"><code>select</code></td><td>Choose between a <code>Collapsible</code> or <code>Drawer</code> style accordion.</td></tr><tr><td>Show description</td><td align="center"><code>checkbox</code></td><td>Enables additional descriptive text within the accordion.</td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Title or label for the accordion block.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Font size for the heading: <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Main content area supporting rich text formatting.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Font size for the main text: <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td><strong>Icon</strong></td><td align="center"></td><td></td></tr><tr><td>Show icon</td><td align="center"><code>checkbox</code></td><td>Enables the use of a built-in icon or uploaded image.</td></tr><tr><td>Icon</td><td align="center"><code>select</code></td><td>Choose from a list of predefined icons (e.g., star, check, heart, etc.).</td></tr><tr><td>Alternative icon/image</td><td align="center"><code>image_picker</code></td><td>Upload a custom SVG or image icon (160x160px recommended).</td></tr><tr><td>Icon size</td><td align="center"><code>range</code></td><td>Size of the icon or image.</td></tr><tr><td>Color</td><td align="center"><code>color</code></td><td>Color of the icon with alpha (transparency) support.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Bottom padding of the accordion block.</td></tr></tbody></table>

## Usage Tips

* Only one Accordion Block is allowed per section (`limit: 1`).
* You can enhance visual storytelling using custom icons or images.
* Rich text allows for links, bold, and other HTML styling for better content structure.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://broadcast.presidiocreative.com/product-theme-blocks/accordion.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.