Section reference · Piéra & Émeraude

Hero banner

Introduce a content or collection page with a full-width image or video.

Source: theme/sections/page-hero.liquid

Where to find it

In the theme editor, open the appropriate template and use Add section.

Unavailable in: header, footer section groups.

Images & video

Desktop 16:9, 2560 × 1440 (3840 × 2160 preferred large). Mobile 4:5, 1200 × 1500; Full screen 9:16, 1440 × 2560. Background video: 1920 × 1080, shared mobile/desktop.

Sizes are recommended source minimums, not upload restrictions. Prepare and crop media.

Set it up

Place Hero banner before the content or product grid. Choose height, text position and darkening.
Use the collection or page title and description reuses resource copy; page headings are inherited, while page body content remains in Page.
On collection pages, a matching Collection image block overrides the collection image, which overrides the section Image. Mobile overrides are independent: set each collection’s Mobile image if needed.

Read the step-by-step guide →

Section settings

Names match the English theme editor. The installed preset may override schema defaults. A conditional field appears only when its related control is enabled.

Color scheme

color_scheme

Schema default: scheme-2. Presets can override it.

Applies a coordinated set of background, text, accent and button colors.

Recommended: Start with the preset scheme. Check contrast after changing colors or photography.

Keep this section still

still

Schema default: false. Presets can override it.

Disables animation for this section only.

Editor note: Turns off the animations of this section only. The switch for the whole theme is in Theme settings, Motion.

Recommended: Enable for a calm chapter or to isolate a motion issue. Global motion and visitor reduced-motion preferences also apply.

Image

image

No schema default; the installed preset may supply a value.

Supplies image for this section or block.

Recommended: Use the image dimensions on this page; choose a focal point where supported and inspect the actual crop. Leave optional images blank when they add no value.

Mobile image

image_mobile

No schema default; the installed preset may supply a value.

Supplies mobile image for this section or block.

Recommended: Use the image dimensions on this page; choose a focal point where supported and inspect the actual crop. Leave optional images blank when they add no value.

Background video

video

No schema default; the installed preset may supply a value.

Selects a Shopify-hosted video.

Editor note: Optional. Plays muted in a loop over the image, with a pause button.

Recommended: Use a short, compressed clip with a useful preview image. Check playback, pause and the mobile crop.

Height

height

Schema default: Large. Presets can override it.

Choices: Full screen · Large · Medium.

Chooses the height behavior or layout from the listed options.

Recommended: Start with the preset choice. Compare the available modes in desktop and mobile previews.

Text position

content_position

Schema default: Bottom left. Presets can override it.

Choices: Bottom left · Center.

Chooses the text position behavior or layout from the listed options.

Recommended: Start with the preset choice. Compare the available modes in desktop and mobile previews.

Image darkening

overlay

Schema default: 25%. Presets can override it.

Range: 0–70%; step 5.

Adjusts image darkening within the range shown.

Recommended: Start at 25%; check the smallest and widest layouts before increasing it.

Use the collection or page title and description

use_resource_title

Schema default: true. Presets can override it.

Reuses the collection title and description, or the page title.

Recommended: Enable on shared templates. Page body content remains in the Page section.

Eyebrow

eyebrow

Schema default: The collection. Presets can override it.

Sets the visible eyebrow.

Recommended: Replace demonstration copy with a short, specific label; confirm it makes sense out of context.

Heading

heading

No schema default; the installed preset may supply a value.

Sets the visible heading with inline emphasis.

Editor note: Used when the collection or page title is off.

Recommended: Replace demonstration copy with a short, specific label; confirm it makes sense out of context.

Text

text

No schema default; the installed preset may supply a value.

Sets the visible text with rich-text formatting.

Recommended: Replace demonstration copy with concise, accurate store content. Avoid unsupported claims and translate it for active languages.

Button label

button_label

No schema default; the installed preset may supply a value.

Sets the visible button label.

Recommended: Replace demonstration copy with a short, specific label; confirm it makes sense out of context.

Button link

button_link

No schema default; the installed preset may supply a value.

Sets the destination for button link.

Recommended: Use the resource picker for internal links. Preview the destination and provide matching link text.

Show product count on collections

show_count

Schema default: true. Presets can override it.

Turns “Show product count on collections” on or off.

Recommended: Start with the preset choice. Enable only when the relevant content or store feature is configured, then preview the result.

Show scroll line

scroll_cue

Schema default: true. Presets can override it.

Turns “Show scroll line” on or off.

Recommended: Start with the preset choice. Enable only when the relevant content or store feature is configured, then preview the result.

Blocks

Add and reorder supported blocks within this section. Settings below apply to each block instance.

Collection image

Maximum of this block type: 12.

On collection pages: use these images for one collection instead of its collection image.

Collection

collection

No schema default; the installed preset may supply a value.

Connects a Shopify collection as the content source.

Recommended: Select the real store resource. Confirm it is available to the storefront; a theme ZIP does not create it.

Image

image

No schema default; the installed preset may supply a value.

Supplies image for this section or block.

Recommended: Use the image dimensions on this page; choose a focal point where supported and inspect the actual crop. Leave optional images blank when they add no value.

Mobile image

image_mobile

No schema default; the installed preset may supply a value.

Supplies mobile image for this section or block.

Recommended: Use the image dimensions on this page; choose a focal point where supported and inspect the actual crop. Leave optional images blank when they add no value.

← All sections · Theme settings · Get support