Collapsible content settings

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:

Flexible content positioning (left, right, or top)
Customizable container layout:

No container
Row container
Section container

Examples :

Container layout : No container:

Demo Store Example:

The Collapsible Content section is displayed on the homepage using the Row Container layout. The color scheme matches the section background, creating a seamless and consistent visual appearance.

You can apply a color scheme with a different background specifically for the collapsible rows when using the Row Container layout. This allows the collapsible content to visually stand out from the main section background, enhancing clarity and user experience.

When using the Section Container layout, if the container color scheme has a background that differs from the section color scheme, it creates a visually distinct block within the section—making the content area stand out from the overall section background.

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 "Add a section"

How to configure the Collapsible content section

Basic Components

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

General settings
Block. Available block types include:

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

General settings

Select a setting described in the following table:

Setting	Description
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.
Caption	Add a brief text or title to describe or highlight the content, placed above the main heading of the section.
Heading	This field is for adding a heading to the section. In the top menu of the field, you can find options to customize the heading. Furthermore, you can click the dynamic source button to insert a dynamic source as the title of the section.
Heading size	The heading size setting offers three options to control the size of your section heading: Small Medium Large
Description	This field is for adding a description to the section. In the top menu of the field, you can find options to customize the text. Additionally, you can use the style of headings from H1 to H6 to the body text. Furthermore, you can click the dynamic source button to insert a dynamic source for the “Collapsible content” description.
Description size	There are three options to control the size of your description: Small Medium Large
Button label	Decide whether the section includes a button: To display the button, enter text into the field as the label. To hide the button, leave the text field empty.
Button link	Add a URL or page link for the button, directing customers to a specific destination.
Button style	Choose the button’s appearance: Solid: A fully filled button. Outline: A button with a border and no fill. Inline: A minimal button style aligned with the text.
Heading alignment	Align the caption, heading, description, and button according to your design preferences: Left Center Right
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: This option uses the natural aspect ratio of the images, ensuring they are displayed without cropping. Small: This option adjusts the images to a smaller, uniform size, potentially cropping them to fit. Large: This option adjusts the images to a larger, uniform size, potentially cropping them to fit.
Desktop layout	Left: caption, heading, description and button on the left, collapsible row on the right; Top: caption, heading, description and button at the top; Right: caption, heading, description and button on the right, collapsible row on the left.
Container layout	No container Row container Section container
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.
Open first collapsible row	Enable this setting to automatically open the first collapsible row by default when the section is loaded.

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.