> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt
> Use this file to discover all available pages before exploring further.

# Add expandable rows with Facet's collapsible content

> Use Facet's collapsible content section to stack rows that open and close, and set each row's heading, icon, starting state and text blocks.

The Facet collapsible content section stacks rows that shoppers click to open and close. Use it for shipping details, size advice, care instructions or any text that shoppers only need some of the time. This page covers the section settings and the collapsible row block.

![The Collapsible content section as it appears on the Facet demo storefront.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/collapsible-content/collapsible-content-overview.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=c43dce440e0fb5c95e9b99caca0fffa1)

## What this section controls

* An optional heading and text above the rows.
* The rows: their headings, their content, and whether they start open.
* The icon that shows a row can open.

## Getting started

**1. Open the Theme Customizer**

In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet.

**2. Add the section**

In the **Sections** panel, click **Add section** and choose **Collapsible content**.

**3. Add rows**

Click **Add block**, then **Collapsible row**. Type the row's **Heading**, then edit the **Text** block inside it.

![The theme editor with the Collapsible content section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/collapsible-content/collapsible-content-location.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=9dda6193289b1a971be8a99be12cec76)

## Section settings

### Common settings

![Theme editor sidebar showing the Collapsible content section settings: Common settings, Color scheme, Top padding, Bottom padding, Page width, Custom CSS.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/collapsible-content/collapsible-content-settings-1.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=c5cebf381e38678abe39e1772788f009)

The section has only common settings. See [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) for details.

* **Color scheme**: the colors of the section and the row borders.
* **Top padding** and **Bottom padding**: None, Small, Medium (default), Large or Extra large.
* **Page width**: Narrow (default), Narrower, Fluid or Full.

## Blocks

### Heading and text

Add **Heading** and **Text** blocks to introduce the rows. Their settings are described on [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md).

### Collapsible row

![Theme editor sidebar showing the Collapsible row block (in Collapsible content) settings: Heading, Open by default, Icon.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/collapsible-content/collapsible-content-block-collapsible-row-1.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=718949ff5e78402049e90d934afb8acd)

Each **Collapsible row** is one row with a heading that opens to show its content.

* **Heading**: the text on the row. Default: "Collapsible row".
* **Open by default**: off by default. When on, the row is open when the page loads.
* **Icon**: the sign at the end of the row. **Plus** (default) or **Chevron**.

Inside the row, add one or more **Text** blocks for the content that shows when it opens. See [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md) for their settings.

## Best practices

* **Write headings as labels or questions.** "Shipping and returns" or "How do I find my size?" tell shoppers what they get before they click.
* **Open only the most important row.** Several open rows make the section long and hard to scan.
* **Use the FAQs section for many questions.** For a longer list of questions and answers, the FAQs section numbers each question for you.

## Related guides

> [card] [FAQs](https://docs.shopify.lightsout.agency/themes/facet/sections/faq.md)
>
> Show a numbered list of questions and answers.

> [card] [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md)
>
> Settings for the heading and text blocks.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.