> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/eclipse/product-pages/product-content-blocks/collapsible-row.md).

# Collapsible row

**Collapsible row blocks** reveal additional text when opened. Use these blocks to organize product details and extra information.

<figure><img src="/files/mqsaAQOEY3HXQWYTlQUw" alt="" width="563"><figcaption></figcaption></figure>

## Add collapsible row blocks

***

Under **Product overview**, click **(+) Add block** and select **Collapsible row**. Use the drag-and-drop handles **`⋮⋮`** to re-order blocks.  Click a row block to start adding content.

{% hint style="warning" %}
**Editing a template will change all pages that use that template**.

[Create and assign new templates](https://github.com/fluorescent/kb-horizon/blob/main/product-pages/pages/editing-page-templates/create-and-assign-new-templates.md) to design different page layouts.

[Add dynamic content](https://github.com/fluorescent/kb-horizon/blob/main/product-pages/pages/editing-page-templates/dynamic-content-with-metafields.md) to show page-specific content in the same template.
{% endhint %}

`Click Collapsible row block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Expand by default</mark></td><td>Show row as already opened with the text revealed.</td><td></td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>The title of the row.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: Collapsible row</mark></td></tr><tr><td><mark style="color:blue;">Content</mark></td><td>Add text that's revealed when the row is opened. Use the buttons to make the text bold or italicized, or to add a link.</td><td></td></tr><tr><td><mark style="color:blue;">Page for content</mark></td><td>Display content from a page create in your Shopify admin. This option is useful for creating and displaying tables (for product guides).</td><td></td></tr><tr><td><mark style="color:blue;">Custom liquid</mark></td><td><p>Add custom Liquid code for apps or custom content.</p><p>See Shopify's <a href="https://shopify.dev/docs/api/liquid">Liquid reference guide</a> and <a href="https://shopify.github.io/liquid-code-examples/">Liquid code examples</a> to learn more.</p></td><td></td></tr></tbody></table>

### Add bottom padding

***

Use **Bottom padding** to adjust the layout of the product overview section by adding spacing between blocks.

Bottom padding does not apply when another collapsible row is positioned below.

`Click Collapsible block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Bottom padding</mark></td><td>Add spacing below the block</td><td><p><strong>1 - 50px</strong> </p><p><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 48px</mark></p></td></tr></tbody></table>