The FAQs section allows you to display frequently asked questions in a collapsible layout. It combines a Section header with multiple Collapsible row blocks, allowing customers to quickly browse questions and expand only the answers they want to read.
This section is suitable for product information, shipping and return policies, payment questions, service details, or other common customer inquiries.
1. FAQs section settings
1.1 General
Color scheme: Use Color scheme to select the color scheme applied to the FAQ section. Click Edit scheme to customize the selected color scheme in the theme settings.
Section width: Use Section width to control the overall width of the FAQ content.
Title right: Use Title right to control the position of the Section header relative to the FAQ list.
Desktop content spacing: Use Desktop content spacing to adjust the horizontal space between the Section header and the collapsible FAQ content on desktop.
1.2 Collapsible
Use the Collapsible settings to customize the appearance of the FAQ rows.
Style: Choose how the collapsible rows are displayed.
Boxed: Display each FAQ item in a boxed layout.
Minimal: Display the FAQ items in a simple layout with separators.
Icon: Choose the icon used to indicate that a row can be expanded or collapsed.
Plus
Caret
Icon position: Choose where the collapsible icon is displayed.
Left
Right
1.3 Section padding
Adjust the spacing around the section separately for desktop and mobile:
Top padding: Set the space above the section on desktop.
Bottom padding: Set the space below the section on desktop.
Mobile top padding: Set the space above the section on mobile.
Mobile bottom padding: Set the space below the section on mobile.
2. Section header block
The Section header is used to introduce the FAQ section. Click Add block inside the Section header to add and arrange content.
For example, you can create a header containing a short introductory text, the main FAQ heading, and a button that directs customers to a contact page.
Text: Enter the supporting text displayed in the Section header.
Text size: Choose the text size between Small and Medium.
Color: Choose whether the text uses the Primary or Secondary color.
Uppercase: Enable this option to display the text in uppercase.
3. Add Collapsible row blocks
Each Collapsible row represents an individual FAQ question. Click Add block inside the row to add the answer content.
Title: Enter the question displayed in the FAQ list.
Open collapsible by default: Enable this option to display the FAQ answer expanded when the page first loads.
Each Collapsible row can be configured independently, allowing you to create a list of different questions and answers while maintaining the same collapsible layout throughout the section.
