Collapsible content

This guide describes the Collapsible content section.

This section is ideal for displaying FAQs or other expandable content.

You can add a main heading, description, and a button. A key feature of this section is layout flexibility— you can position the main content on the left with collapsible rows on the right, or vice versa. Alternatively, you can place the main content above the collapsible rows.

Additionally, you can include an image that appears below the main content.

Layout Options:

Desktop layout (Aside left, aside right)
Customizable container layout:

No container
Row container
Section container

Key Features

Image support
Contact form

Demo Store Example:

The Collapsible Content section appears on the product detail page using the Section Container layout. The container has its own color scheme. Collapsible rows are positioned on the left side and image on the right.

Demo Example

FAQ page with a Collapsible Content section: collapsible rows are displayed on the left, and a contact form is placed on the right.

How to access the Collapsible content section

From any page, click on “Add Section” and choose “Collapsible content” from the list.

To insert a new section between existing ones, follow the steps in the article "Sections and blocks" and locate the section titled “How to add a section”.

How to configure the Collapsible content section

Basic Components

The “Collapsible content” section consists of two primary components:

General settings – These control the overall settings of the section.
Block – Each block has its own individual settings.

Available block types include:

Collapsible row (To learn about all available block settings, see the related article "Collapsible row").

To insert a new block between existing ones or to add a block when none have been added yet, refer to the article "Sections and blocks" and locate the section titled “How to add a block”.

General settings

Select a setting described in the following table:

Setting	Description
Caption	Add a brief text or title to describe or highlight the content, placed above the main heading of the section.
Heading	Use this field to add a heading to the section. The top menu provides options to customize the heading style and formatting. You can also click the dynamic source button to insert dynamic content as the section title.
Heading size	Choose the size of the section heading. This setting offers three options: Small Medium Large
Heading alignment	Align the caption and heading, according to your design preferences: Left Center Right
Layout	No container – Content spans the full width of the page. Row container – Content is wrapped in a row for a structured layout. Section container – Content is contained within the section boundaries for a balanced look.
Color scheme	A color scheme consists of a predefined set of colors you can apply to this section for consistent styling. These schemes are created in the Theme Settings and are available across all sections, making customization faster and ensuring a cohesive color system throughout your store. Learn more about color schemes.
Container color scheme	A color scheme consists of a predefined set of colors you can apply to this section for consistent styling. Learn more about color schemes.

Aside

Setting	Description
Desktop layout	Choose how the section is displayed on larger screens. Aside Left – The sidebar content appears on the left side. Aside Right – The sidebar content appears on the right side.
Aside width	Small Medium Large
Image	Click on “Select Image” to access your media library, upload a new image, or explore free images. Also, you can connect a dynamic source by clicking the source button. Once an image is selected, you can use the “Change” button to remove, replace, or delete it.
Image ratio	Adapt to image Small Medium Large
Show contact form	Enable or disable the contact form in this section. Its position (left or right) depends on the selected layout.
Form heading	Add the heading at the top of the form
Form description	Provide additional information for the form.

Section padding

Setting	Description
Top padding	The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section.
Top padding mobile	The 'Top padding (Mobile)' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile	The 'Bottom padding (Mobile)' setting works similarly to the 'Top padding (Mobile)' setting but controls the space at the bottom of the section for mobile devices.