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 you can create new templates or insert dynamic content with metafields.


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

Settings reference

Click an Item block to find the following settings.

Item content


Expand by default

Choose whether to load the row item as already opened with the text revealed.


Choose one of 30+ icons to display next to the heading of the row item.

Custom icon image

Upload your own icon image to display next the heading. We recommend a .png image with a transparent background and minimum dimensions of 50px by 50px.


Add text for the row item heading. We recommend using a short title or question that is answered in the row item text.


Add text that will expand beneath the heading.

Click the Collapsible row section to find the following settings.

Header content


Center header content

Choose to display headings as center-aligned within section. Uncheck this option to align headings to the left.


Add text to show a small heading above the main section heading.


Add text to show a main heading above the section.

Heading size

Change the font size of the heading from small (1) to large (8).


Add text to show a subheading below the main heading.

Header placement

Change the position of section headings to appear Above content, Left of content, or Right of content. On mobile, the header is always above the content.

Button link

Select or paste a URL for a button. You can add up to three buttons below the section heading.

Button label

Enter call-to-action text to display as the button label. The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now).

Button style

Choose a style for the button. Select Primary button (Solid), Secondary button (Solid), Tertiary button (Outline), or Text.

Buttons position

Choose to show the buttons either in the Header (below the headings) or in the Footer (below the product rows). In the footer position, the button is always centered.

List items style


Title font

Set the collection title font to the Body or Heading font selected in your theme settings.



Content width

Display the section at Full width or use the slider to set a custom width

Custom width

Set the maximum width of the section: between 400 and 1200 pixels. The section will change in size to fit smaller screen sizes.

Section colors


Color scheme

Change the color scheme applied to the section text and background. Select the Default color scheme from your theme settings or select a variant scheme based on the default colors: either Inverse, Soft, Accent, or Sale. You may also select one of the two custom color schemas.

Learn more about Color schemes.

Override with custom colors

Check this option to apply custom colors to the section. These colors will override the color scheme.

Text color

Select a custom color for all text in the blog post tile. This setting applies only if the Override with custom colors option is enabled.

Background color

Select a custom color for background of the blog post tile. This setting applies only if the Override with custom colors option is enabled.

Section style


Top spacing

Increase or decrease the amount of space above the section.

Bottom spacing

Increase or decrease the amount of space below the section.

Enable animation

Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See the Animation guide to learn more.

Related links

Multi-column section Rich text section

Last updated