# Collapsible rows

The **Collapsible rows** section presents content in an accordion-style layout, allowing users to expand and collapse rows to reveal additional information. This section is especially useful for FAQs, policies, product details, or any content that benefits from a compact, user-friendly display.

It helps reduce visual clutter and enhances page usability by organizing information into digestible, interactive segments.

As a **preset section**, it can be added, removed, and reordered as needed.

<figure><img src="https://content.gitbook.com/content/9icwdCUv3B94Yb9tmqHW/blobs/DkXFO4S3jSARD43c01ii/image.png" alt=""><figcaption></figcaption></figure>

***

#### How to Configure the Collapsible Rows

1. In Shopify admin, go to **Online Store → Themes**.
2. Click **Customize** next to the **Elemento** theme.
3. In the theme editor, navigate to the desired page template (e.g., Home page) using the top preview dropdown.
4. In the left sidebar, click **Add section**, then select **Collapsible Rows**, or locate it if it’s already added.
5. Add and configure individual rows — enter titles and content for each collapsible item, and adjust styles or behavior settings.
6. You can **drag and drop** this section to reorder it on the page.
7. Click **Save**.

#### Section Settings

| **Setting**         | **Type**                 | **Description**                                           |
| ------------------- | ------------------------ | --------------------------------------------------------- |
| **Heading**         | Text                     | Section title displayed above the collapsible rows.       |
| **Columns count**   | Range (1–3)              | Set how many columns the rows are arranged into.          |
| **Color scheme**    | Color scheme selector    | Customize background and text color combination.          |
| **Section padding** | Group (Desktop / Mobile) | Set top and bottom spacing independently for each device. |

**Section Padding**

| Device      | Setting        | Type  | Description                              |
| ----------- | -------------- | ----- | ---------------------------------------- |
| **Desktop** | Top padding    | Range | Space above the section on desktop view. |
| **Desktop** | Bottom padding | Range | Space below the section on desktop view. |
| **Mobile**  | Top padding    | Range | Space above the section on mobile view.  |
| **Mobile**  | Bottom padding | Range | Space below the section on mobile view.  |

***

#### Blocks

**Row**

Each **Row** functions as an individual collapsible item in the section.

| **Setting** | **Type**  | **Description**                                                                 |
| ----------- | --------- | ------------------------------------------------------------------------------- |
| **Heading** | Text      | The clickable label that toggles the visibility of the content.                 |
| **Content** | Rich text | The hidden text content revealed when the row is expanded. Supports formatting. |
