Collapsible row list

Theme section

This feature was added in v5.1.0 on July 22, 2022. See our changelog and theme update guide to learn more.

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 use metafields and dynamic sources.

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

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

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

6. Click Save.

Section style

Adjust the width and style of the overall section.

STEPS

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.

---

Related links

Text columns with images Rich text section