Collapsible row list

Theme section

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.

Editing a template changes all pages that use that template. To edit specific pages, you can create new templates or insert dynamic content with metafields

STEPS

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.

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 ⋮⋮

Add row items

For each Row item, add a heading, expandable text content, and an optional icon.

STEPS

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 ↗.

5. Click Save.

Section headings

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

STEPS

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. Change the Heading size to Small, Medium, or Large.

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?"

6. Click Save.

Section style

Adjust the overall section style by changing the Padding around the section content, and add an optional Top divider to clearly separate sections.

STEPS

In your theme editor (Customize):

1. Click on the Collapsible row list section to open the settings.

2. Choose to Enable animation to show visual effects when scrolling, hovering, or interacting with the section.

   Learn more about Section animations in Stiletto.

3. Choose to display a Top divider that separates sections with a Solid line.

   The Top divider uses the color of Lines and borders set in the Theme settings.

4. Select a Padding option to change the spacing between sections. Choose between Top and bottom, Top only, Bottom only, or set it to None.

5. Set the Content width to display the section at Full width or use the slider to set a custom width between 400 - 1000 pixels.

6. Click Save.

Settings reference

Click a Row block to find the following settings.

Row blocks

Setting	Description
Expand by default	Choose whether to load the row item as already opened with the text revealed.
Icon	Display one of 30+ icons next to the heading of the row item.
Heading	Enter text for the row item heading. We recommend using a short title or question that is answered in by the row list text.
Text	Enter text to reveal beneath the heading that expands on a topic or answers a question.

Click the Collapsible row list section to find the following settings.

Section content

Setting	Description
Heading	Enter text to display a section title above the row list.
Heading size	Display heading text as Small, Medium, or Large.
Heading alignment	Position heading text to the Left or Center above row list.
Item heading font	Use the Heading or Body font for the row list text. The heading and body font are set in the Theme settings.

Section style

Setting	Description
Enable animation	Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See the Animation guide to learn more.
Top divider	Show a solid border above the section to visually separate it from other sections. The Top divider uses the Lines and borders color selected in the theme color settings.
Padding	Add a margin of space around the section to either the Top and bottom, Top only, Bottom only, or set it to None.
Content width	Display the section at Full width or use the slider to set a custom width between 400 - 1000 pixels.

---

Related links

Multi-column section Rich text section