Hero

Shows a photo or video filling the area, with a heading, body text and links on top. One slide stays static; two or more rotate. Up to three slides are recommended.

To place an image beside text, use the Image with text section; for a strip of three or four features under the hero, use the Feature band section. (Split from this section on 2026-11-04: the former “Media right / left” layouts and “Benefit below media” blocks now live in those sections.)

How to add

In the theme editor, open the page, choose “Add section”, then select “Hero”. To add more slides, choose “Add block”, then “Slide”.

Settings

Color scheme: The color scheme for the whole section. Defaults to scheme 1.
Full width: Shows the section across the full screen width. Off by default.
Fill the screen height: Fills the height below the header and announcement bars. Off by default.
Use H1 for the first heading (not on home): Makes the first slide heading the page’s main heading (H1). Turn it on when the section opens a page other than the home page. On the home page the header logo is the H1, so this heading stays H2. Off by default.
Desktop height: Section height on desktop (40–90rem, default 65rem). Shown only when “Fill the screen height” is off.
Mobile height: Section height on mobile (20–60rem, default 36rem). Shown only when “Fill the screen height” is off.
Automatically change slides: Moves to the next slide at a set interval. Off by default.
Seconds between slides: The interval for automatic changes (4–12 seconds, default 6). Shown only when automatic changes are on. A playing video finishes before the slide advances.
Slide navigation position: Choose Below image (default) or On image. On image places small controls at the bottom center. Shown only with two or more slides.

Padding

Top: Space above the section (0–100px, default 0px).
Bottom: Space below the section (0–100px, default 0px).

Blocks

You can add up to 5 “Slide” blocks.

Slide

Images and video

Desktop image: A selected video takes priority. The image is shown while the video loads.
Mobile image: Uses the desktop image if blank. If a video is also selected, the mobile image appears on mobile instead of the video.
Image alt text: Describes the image for screen readers. If blank, uses the alt text stored on the image, then the slide heading. Shown only when an image is selected.
Video: If a mobile image is selected, mobile shows the image instead of the video.
Video playback: Choose Click to play, Autoplay on desktop only (default), or Autoplay on desktop and mobile. Autoplay is muted. Click to play shows standard video controls. Shown only when a video is selected.
Loop video: Repeats an autoplay video. When off, the video stops on its last frame, or moves to the next slide when automatic slide changes are on. On by default.
Pull image back on scroll: Pulls back the zoom of a single image as you scroll. Not used for video, reduced motion, or in the theme editor. Off by default.

Cropping

Desktop crop position: Choose Image focal point (default), center, left, right, top, or bottom.
Mobile crop position: Choose Center (default), image focal point, left, or right.

Text

Eyebrow: A short phrase placed before the heading.
Heading: The slide heading.
Write the heading vertically: Japanese headings run vertically from the top right. Other languages use horizontal headings. The eyebrow, body text and buttons stay together. Off by default.
Body text: The text that follows the heading.

Text position and overlay

Desktop text position: Choose from nine positions. Defaults to center left.
Mobile text position: Choose top, center (default), or bottom.
Text color over the image: Choose White (default) or Section color scheme. On a bright photo, the section color scheme keeps the text readable without darkening the photo, and the overlay uses the section background color.
Overlay strength: How strong the overlay behind the text is (0–50% in steps of 5, default 40%).
Overlay shape: Choose Left, Full (default), or Right. Full covers the whole photo evenly. Left and right start at the overlay strength on that edge and fade toward the other side. On mobile the overlay is always full.