Collapsible row list
Theme section
Last updated
Theme section
Last updated
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.
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.
Click an Item block to find the following settings.
| Setting | Description |
|---|---|
Expand by default | Choose whether to load the row item as already opened with the text revealed. |
Icon | 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. |
Heading | Add text for the row item heading. We recommend using a short title or question that is answered in the row item text. |
Text | Add text that will expand beneath the heading. |
Click the Collapsible row section to find the following settings.
| Setting | Description |
|---|---|
Center header content | Choose to display headings as center-aligned within section. Uncheck this option to align headings to the left. |
Accent | Add text to show a small heading above the main section heading. |
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). |
Subheading | 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. |
| Setting | Description |
|---|---|
Title font | Set the collection title font to the Body or Heading font selected in your theme settings. |
| Setting | Description |
|---|---|
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. |
| Setting | Description |
|---|---|
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. |
| Setting | Description |
|---|---|
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
