# Collapsible row

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

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FzcfIxCJv3qM2Uvxctogn%2Fproduct-collapsible-row.png?alt=media&#x26;token=67dc0491-9ab2-49fe-b71b-666ff4ebf2a9" 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>