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

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

Section content

Section style


Related links

Multi-column section Rich text section

Last updated