# Accordion

Allows you to organize and present additional product information in a collapsible, space-saving format. Ideal for including specifications, materials, policies, or size charts without overwhelming the page visually.

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FXyrBKa9cuj3vh8N0Gik7%2Faccordion.gif?alt=media&#x26;token=bcec199f-f9fc-4d72-a754-397ffa6338d3" alt=""><figcaption></figcaption></figure>

### How to set up

<table><thead><tr><th width="200.13714599609375">Setting</th><th width="109.65789794921875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Show description</td><td align="center"><code>checkbox</code></td><td>Toggles the display of the product’s main description inside the accordion.</td></tr><tr><td>Show read more button</td><td align="center"><code>checkbox</code></td><td>Displays a 'Read more' button to toggle longer text sections.</td></tr><tr><td>Enable full width</td><td align="center"><code>checkbox</code></td><td>Expands the accordion to span the full width under the product gallery.</td></tr><tr><td>Background color</td><td align="center"><code>color</code></td><td>Sets the background color of the accordion section.</td></tr><tr><td>Show divider lines</td><td align="center"><code>checkbox</code></td><td>Adds dividing lines between accordion items (only for transparent backgrounds).</td></tr><tr><td>Border thickness</td><td align="center"><code>select</code></td><td>Choose between <code>Normal</code> or <code>Bold</code> border styles for dividers.</td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Sets the accordion section title.</td></tr><tr><td>Heading style</td><td align="center"><code>select</code></td><td>Choose a font style for the heading: <code>Heading</code> or <code>Body</code>.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Rich text field to add product details like materials, features, shipping info, etc.</td></tr><tr><td>Page</td><td align="center"><code>page</code></td><td>Link to a Shopify page for extended info (e.g., a size chart).</td></tr><tr><td><strong>Block spacing</strong></td><td align="center"></td><td></td></tr><tr><td>Padding bottom</td><td align="center"><code>range</code></td><td>Adds spacing below the block (0-50px, adjustable in 2px steps).</td></tr></tbody></table>