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.

STEPS

In your theme editor (Customize):

Select a Template to edit from the dropdown menu in the top bar.
Learn how to use templates in our Templates guide.
Under Template, click (+) Add section and select Collapsible row list.
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

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.

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.

Header content

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

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.

List items style

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

Setting

Description

Title font

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

Layout

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

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

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

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

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.

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
Multi-column section Rich text section

Last updated 1 month ago