Collapsible content settings

This guide describes the Collapsible content section.

It’s ideal for displaying FAQs or other expandable content.

You can add a caption and a main heading to introduce the section. A key feature is its layout flexibility—you can choose to display collapsible rows with or without an image, and position the image on the left or right side of the content.

Layout options

Container 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.

Desktop layout

Image first – Image is displayed on the left, collapsible rows on the right.
Image second – Image is displayed on the right, collapsible rows on the left.

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.

Image layout

Setting	Description
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	Image first: Image on the left, tabs with text on the right; Image second: Image on the right, tabs with text on the left;

Section padding

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