03GENERAL

Divided banner

This page explains how “Divided banner” actually behaves, which data it depends on, and what its settings change.

WHAT IT DOES

Divided banner

This page explains how “Divided banner” actually behaves, which data it depends on, and what its settings change.

Used in templates

index.jsonpage.find-your-routine.jsonpage.our-philosophy.jsonpage.skin-concerns.json

IMPLICIT BEHAVIOR

What the theme does automatically

This section only displays elements that have content. Empty elements are ignored to preserve the layout.

CONFIGURATION

Understand the settings

Accessibility

Give the banner a meaningful name for assistive technologies.

Accessibility labelaccessibility_label

This text describes the assistive technologies section and is not displayed visually.

Dimensions

Set the banner height on desktop and mobile.

Height on desktopheight_desktop

Default: 680 · Range: 420–900px

Height of each media on mobileheight_mobile

Default: 520 · Range: 320–720px

Layout

Choose the mobile behavior, spacing and shape of the panels.

Mobile displaymobile_layout

Default: slider · Options: Horizontal slider, Vertical column

Width of a mobile slidemobile_slide_width

This setting applies to Carousel mode on mobile.

Default: 85 · Range: 70–95%

Spacing between mediagap

Default: 0 · Range: 0–32px

Media roundingcard_radius

Default: 0 · Range: 0–48px

Media readability

Adjust overlay applied to media to maintain readable text.

Overlay intensityoverlay_opacity

Default: 60 · Range: 0–100%

Section palette

Applies a consistent palette to the background, text, and buttons in this section.

Section appearance

Use a dedicated paletteopaline_use_color_scheme

Default: disabled

Paletteopaline_color_scheme

Default: scheme-1

Spacing

Space after sectionopaline_section_spacing

Creates space between this section and the next. Mobile spacing adjusts automatically.

Default: 0 · Range: 0–160px

Left and right insetopaline_content_inset

Moves content away from the edges. Mobile spacing adjusts automatically.

Default: 0 · Range: 0–120px

COMPOSITION

Available blocks

Mediaimage

Limit: 6

Add this block only when it provides useful information to the journey.

CHECKS

Before publishing

✓
Content remains readable in every color scheme.
✓
Labels match the storefront language.
✓
Displayed promotions match Shopify rules.
✓
Interactions remain accessible by keyboard and touch.