Collapsible content with image

Collapsible content with image:

The Collapsible content with image content is a design element. This design element is commonly used for product listings, where clicking on a product image reveals additional product details. It’s also used for FAQs , where clicking on a question reveals the answer.

How to set up the Collapsible content with image?

Go to Customize theme. Click on the top dropdown menu to select the Products>Default product template.
From the left side menu, select “Collapsible content with image”
Customize this section by using the settings described in the following table:

Customize section settings:

Settings	Description
Image	Select any image to display.
Image ratio	The Image ratio for the product images: Adapt to image(default): Adapt to image should only be used when images are the same dimensions. Square: Crops the images to use a 1:1 ratio. Portrait: Crops the images to use a 2:3 ratio. Landscape: Crops the images to use a 3:2 ratio.
Heading	The title for the block. Use the buttons to make the text bold or italicized, or to add an internal/external link.
Heading size	The size of the heading text. Extra extra large Extra large Large (default) Medium Small Extra small Extra extra small
Description	Display paragraph-style text in the section.
Desktop image placement	The Image placement layout for this section on desktop: Image first: Displays the image on the left. Image second: Display the image on the right. Note - Image first is the default mobile layout.
Desktop content position	Sets the position of the content on desktop. Left Center (default) Right
Text Alignment	Align the text in the container. Choose between left (default), center, or right.
Collapsible row settings	Customize this section by using the settings on the right side of the theme editor, as described in the following table.
Color scheme	A set of colors that you can apply to this section.
Make section background full width	Select the checkbox to make section background in full width.
Section spacing	Add space to the top or bottom of the Section. Use the range slider to add between 0px and 100px of space to the top or the bottom of your section.

Collapsible row Block settings:

Settings	Description
Heading	The title for the block. Use the buttons to make the text bold or italicized, or to add an internal/external link.
Description	Display paragraph-style text in the section.
Default open	Enable default open: Select this checkbox to enable/disable the default open collapsible row. Note - By default one collapsible row opened.