Hero

The hero opens a page with a large photograph, a heading and a call to action. With several slides, it becomes a slideshow.

Name in the editor

Hero (FR: Bandeau principal)

Where to add it

Any template (except the Overlays group)

Accepted blocks

Slide

Number of blocks

5 at most

Section settings

Slide block

• The button only appears if both Link and Link label are filled in.
• The Index label appears in the slideshow's numbered navigation bar; if it's empty, the heading is used instead.

Height

Height	Size
Small	64% of the screen height, 34rem at most
Medium	82% of the screen height, 44rem at most
Large	The full screen height, 56rem at most

The height is a minimum: when a slide's text doesn't fit (in a short window, for example), the hero grows rather than letting the words slip under the header. It always takes the height of its tallest slide, so the page doesn't move as the slides change.

When it's in first position with the Large height, the hero fills the whole screen, minus the announcement bar. The image fills the frame and is cropped around its focal point: set it in ContentFiles or from the image picker so the subject stays visible on phones.

Image overlay

The text sits at the bottom left of the image. Image overlay paints a gradient that rises from the bottom of the image, behind the text, so it stays readable over any photograph.

Slideshow

With two or more slides, a numbered bar (01, 02...) appears under the text; each number carries its slide's index label. On phones, only the numbers are shown. Slides fade from one to the next.

With Advance automatically:

• a line fills in under the current number to show progress;
• a Pause / Play button is always present, and the shopper's pause is remembered for the rest of their visit;
• the slideshow stops while the pointer or keyboard focus is inside the section;
• it never starts if the shopper has asked their system to reduce motion.

Without JavaScript, only the first slide is shown.

Video in a slide

A slide's Video (uploaded to Shopify) plays muted and on a loop over its image, once the page has loaded and while the slide is on screen. The image shows first and stays the largest part of the page's first paint; without an image, the video's own preview image takes its place. Choose short, silent ambient footage.

• A slide with a video brings the Pause / Play button, even without Advance automatically: one press stops both the slideshow and the video for the rest of the visit.
• If the shopper has asked their system to reduce motion, or without JavaScript, the video doesn't play and the image stays.

Transparent header

The hero is the only section the header can become transparent over. It must be the first section of the page and contain at least one slide. See Transparent header.

Images

Use images at least 2,400px wide, in landscape for desktop. In first position, the image is loaded with priority so it shows as fast as possible. A slide without an image shows a placeholder illustration, including on your online store.