How to set up the accordion with media section

The accordion with media section displays collapsible items that include a title, text, button, and image, providing a well-organized way to present content.

Section settings

Heading: Set a title for this section. This is optional.

Subheading: Set a subtitle for this section. This is optional.

Heading alignment: Choose the alignment for the heading. This setting also applies to the subheading.

Layout

Section width: Adjust whether this section should span the full width of the page (100%) or be contained within a limited layout. Applies on desktop. On mobile, the section spans the entire width of the screen.

Section inner max width (px): Set the maximum width of the content inside this section in pixels.

Section left/right gutter: Adjust the left and right spacing of the section relative to the viewport edge on narrow screens.

Vertical inner spacing: Adjust the spacing between the content and the top/bottom edges of this section in pixels.

Vertical outer spacing: Control the space between this section and the sections above and below it in pixels.

Start with first item expanded: Choose whether the first item in this section should be expanded by default.

Image position: Choose whether the image should be displayed on the left or right side of the section.

Image width: Set the image width to Half, One-Third, or Two-Thirds of the section.

Image ratio: This option allows you to select the ratio of the images in the accordion with media. By default, “Adapt to image” keeps the original ratio of each image. Portrait, Square, and Landscape will force images into their respective shapes.

Items spacing: Adjust the spacing between each accordion item. Options: Extra Small, Small (default), Medium, Large, Extra Large.

Styles

Heading size: Set the font size for the heading in all accordion items. Options: Extra Small, Small, Medium, Large, Extra Large.

Description size: Set the font size for the description text in all accordion items. Options: Extra Small, Small, Medium, Large, Extra Large.

Font scale: Adjust the overall scaling of text in all accordion items, affecting both headings and descriptions proportionally.

Section heading color: Choose the color for the section heading.

Section subheading color: Choose the color for the section subheading.

Section background color: Choose the background color for this section.

Item background color: Choose the background color for all accordion items.

Item heading color: Choose the color for the heading of all accordion items.

Item description color: Choose the color for the description text in all accordion items.

Button background color: Choose the background color for the button in all accordion items.

Button text color: Choose the text color for the button in all accordion items.

Button border radius: Adjust the roundness of the button’s corners in all accordion items.

Accordion item

Image: Select an image for this accordion item.

Heading: Set the title for this accordion item.

Description: Add a text description for this accordion item.

Button label: Set the text that will appear on the button in this accordion item.

Button link: Set the destination for the button link (page, collection, product, external link, etc.).