03GENERAL

Hero discovery

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

WHAT IT DOES

Hero discovery

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

Used in templates

index.jsonpage.find-your-routine.jsonpage.ingredient-library.jsonpage.our-philosophy.jsonpage.our-story.jsonpage.skin-concerns.jsonproduct.unsellable-product.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

Content

Fill in the main texts of the hero.

Eyebroweyebrow

Titleheading

Texttext

Action button

Set the button's label, destination, and style.

Button textbutton_label

Button linkbutton_link

Button Stylebutton_style

Default: primary · Options: Main, Secondary

Gallery and accessibility

Name the gallery for assistive technologies and choose its width.

Accessible description of the gallerygallery_label

Widthwidth

Default: contained · Options: Content, Full width

Layout

Adjust the position and dimensions of the gallery according to the device.

Position of images on desktopdesktop_media_position

Default: right · Options: Images on the right, content on the left, Images on the left, content on the right

Height of images on desktopvisual_height

Default: 600 · Range: 420–1500px

Height of images on mobilevisual_height_mobile

Default: 400 · Range: 300–1500px

Image style

Adjust the distance and angles of the visuals.

Spacing between imagesimage_gap

Default: 14 · Range: 6–32px

Rounding imagesimage_radius

Default: 22 · Range: 0–40px

Colors

Activate colors specific to this section if it needs to stand out from the global settings.

Use custom colorsuse_custom_colors

If this option is left disabled, the section uses the global theme colors.

Default: disabled

Backgroundbackground_color

Default: #f0ece8

Textforeground_color

Default: #171717

Spacing

Adjust the space above and below the section.

Top marginpadding_top

Default: 72 · Range: 0–140px

Bottom marginpadding_bottom

Default: 72 · Range: 0–140px

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

Title

Alignment on desktopopaline_heading_alignment

Default: inherit · Options: Keep the design, Left, Center, Right

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

Pictureimage

Limit: 3

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.