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.
Under Template, click (+) Add section and select Collapsible row list.
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):
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.
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.
Enter text for the Heading to introduce a topic or pose a question.
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 ↗.
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):
Click on the Collapsible row list section to open the section settings.
Enter Heading text to display a section title in the top-left.
The default heading is "Accordion list."
Change the Heading size to Small, Medium, or Large.
Select or paste a URL for the Button Link.
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?"
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):
Click on the Collapsible row list section to open the settings.
Choose to Enable animation to show visual effects when scrolling, hovering, or interacting with the section.
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.
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.
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.
