How to set up the split banners section

The split banners section combines multiple images in a structured layout to showcase promotions, products, or brand stories.

Section settings

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

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

Heading alignment: Select the alignment for the heading and subheading. Options: Left, Center, Right.

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: Adjust the space between this section and the sections above and below it in pixels.

Banners

Banner 1 image: Select or upload an image for the first banner. You can also browse free images via the “Explore free images” link.

Banner 1 link: Set the destination for the first banner (e.g., page, collection, product, external link, etc.).

Banner 2 image: Select or upload an image for the second banner. You can also browse free images via the “Explore free images” link.

Banner 2 link: Set the destination for the second banner (e.g., page, collection, product, external link, etc.).

Banners placement on desktop: Choose the placement of the banners when displayed on desktop. Options: Left, Right

Slider

Autoplay: Enable or disable automatic sliding of the slides.

Autoplay duration: Set the time interval (in seconds) between slide transitions when autoplay is enabled.

Navigation background color: Choose the background color for the navigation controls.

Navigation foreground color: Choose the color of the navigation icons or arrows.

Section styles

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

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

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

Slide

Image: Select or upload an image for the slide. You can also browse free images via the “Explore free images” link.

Link: Set a destination for the slide link (e.g., page, collection, product, external link, etc.).