Collapsible content
The Collapsible content section displays expandable rows that allow customers to open and close specific sections of information, making it easier to navigate lengthy content.
This section is typically used on FAQ pages to answer common questions, but it can also be used for any structured information that benefits from a collapsible format. By organizing information into expandable rows, this section provides a clean, user-friendly way to present detailed information without overwhelming customers.
1, How to add section in theme editor:
In your theme editor (Customize), scroll to the bottom of the template and select Add section.
In the list, locate and select Collapsible content section. The section will now be added to your page, ready for customization.
2, Section settings:
The Section settings control the heading position, column layout, style, and color application.
Heading position: Adjust the layout and placement of the heading in relation to the collapsible rows:
The heading appears above the collapsible rows.
The heading appears on the left side, and the collapsible rows are on the right.
Number of columns on desktop: Adjust the number of columns for FAQ items on desktop:
All collapsible rows are arranged in a single column.
Collapsible rows are displayed in two columns, with odd-numbered rows on the left and even-numbered rows on the right.
Style: Define the style of the section content:
No specific style is applied to the content.
Numbers appear before each question in the collapsible rows.
Icons appear before each question in the collapsible rows.
Secondary background: Determine how the Color scheme is applied within the section: None: When the color scheme changes, both the section background and the background of the collapsible rows change together. Show as row background: Only the background of the collapsible rows changes with the color scheme, while the section background remains unchanged.
3, Block settings:
The Collapsible content section includes two primary blocks: the Heading block and the Collapsible row block.
Heading block:
Enter text for the heading and description to introduce the content. Adjust the alignment of content to Left, Center, or Right.
Add a button below the heading and description to guide customers to other parts of your store. You can choose the button style as Solid, Outline, or Text.
Adjust the alignment of content on mobile to Left, Center, or Right for optimal display.
Collapsible row block
Heading: Enter a question for the FAQ or collapsible row title. If left blank, the block will not be visible.
Row content: Add the answer or content for the row. When the row is expanded (caret icon pointing up), the answer appears below the question. When collapsed (caret icon pointing down), the answer is hidden.
You can pull content from a page in your store by selecting Tab content from page and choosing a page. If used, the page content will override any text entered manually in the Row content field.
Icon: Choose an icon from A Theme’s icon list to display at the start of each question, enhancing the visual structure of the rows.
Last updated
Was this helpful?