# Collapsible row list

{% hint style="info" %}
This feature was added in v5.1.0 on July 22, 2022. See our [changelog](/lorenza/readme/changelog.md) and [theme update guide](/lorenza/readme/theme-updates.md) to learn more.
{% endhint %}

The **Collapsible Row List** section shows expandable rows that customers can open to read more about certain topics or find answers to common questions. Use this section to anticipate your customers needs and share information about your store and products.

## Set up section

Add this section to your template and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](/lorenza/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [use metafields and dynamic sources](/lorenza/general/adapting-your-theme/dynamic-content-with-metafields.md).
{% endhint %}

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Select a **Template** to edit from the dropdown menu in the top bar.

   > Learn how to use templates in our [Templates guide](/lorenza/general/editing-themes/using-templates.md).
2. Under **Template**, click **(+) Add section** and select **Collapsible row list**.
3. Change the order of your sections by using the drag and drop handles **`⋮⋮`**

</details>

## **Add row items**

Each **Row item** has a heading, expandable text content, and a style option.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click on a **Row** block to open the settings.

   > Click **(+) Add Item** to create new row items.

   > Click **Remove block** or the eye icon to delete or hide a block.
2. Set the **Style** to **Open** to display the row item with both the heading and text revealed when the page loads. Set it to **Closed** to display only the heading, which can be clicked to reveal the text.
3. Enter text for the **Heading** to introduce a topic or pose a question.
4. Enter text for the **Text** to say more about a topic or answer a question.

   > Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor guide](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor).
5. Click **Save**.

</details>

## Section headings

Add a heading as the title for the section and change the heading size and alignment.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click on the **Collapsible row list** section to open the section settings.
2. Enter **Heading** text to display a section title in the top-left.

   > The default heading is "Accordion list."
3. Use the **Max width of content** slider to set the maximum heading width between **`16px`** and **`80px`**.

   > Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.
4. Select or paste a URL for the **Button Link**.
5. Change the **Button label** (e.g. "View all posts").

   > Leave this field blank to remove the button.

   > The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
6. Click **Save**.

</details>

## Section style

Adjust the width and style of the overall section.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click on the **Collapsible row list** section to open the section settings.
2. Under **Section Style**, choose to display the **Default** or **Contrast** section colors.

   > The **Contrast** style can helps distinguish sections and add variety to your page.
3. Choose whether to **Enable animation** to show visual effects when scrolling, hovering, or interacting with the section.
4. Use the **Max width of section** slider to set the maximum section width between **`400px`** and **`1200px`**.
5. Click **Save**.

</details>

\\

***

> **Related links**
>
> [Text columns with images](/lorenza/sections/theme-sections/text-columns-with-images.md)\
> [Rich text section](/lorenza/sections/theme-sections/rich-text.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/lorenza/sections/theme-sections/collapsible-row-list.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.