How do I set up the Hero banner on my home page?

The Hero is a large banner with an image or a video behind your text and buttons. It sits on your home page and is often the first thing shoppers see.

Add a hero

1. Open the builder and choose Home page in the Pages tab.
2. In the Sections tab, click Add new section and pick Hero from the Content group.
3. Pick your media, write your text, and click Publish.

The hero is only offered on the home page, and you can add one per page. To move, copy, or hide it, see Sections and blocks

Media and height

• Mode: Single shows one image or video. Split shows two, set in Media 1 and Media 2. They sit side by side when the content Direction is Vertical, and one above the other when it is Horizontal. On phones the two are always stacked.
• Media 1 and Media 2: an image or a video from your media library. A video plays muted, on a loop, as a moving background.
• Height: Small, Medium, Large, Fullscreen (fills the screen), Image (follows the shape of your first image, so nothing is cut off), or Custom. With Custom, Custom height sets the height as a share of the screen height. New heroes start on Image.

Text and buttons on top

Select the hero and click Add new block to add content over the media: up to 2 Text, 2 Button, 2 Group, and 2 Divider blocks. Their own settings are in Group, Text, Button, and Divider blocks: how do the layout component settings work?

Under Layout, you place this content:

• Direction: Vertical stacks the blocks, Horizontal puts them side by side. With Horizontal, Stack vertically on mobile stacks them on phones.
• Position and Alignment: move the content up or down and left or right, for example bottom left or center. Space between spreads the blocks apart.
• Content width: Page keeps the content inside your page width, Full lets it reach the screen edges. The media always fills the full width.

Gap (under Spacing) sets the space between blocks, and Padding the space around them.

Colors and overlay

• Color scheme: the text and button colors of the hero. See Color schemes.
• Media overlay: adds a color layer on top of the media so your text is easier to read. Then set Overlay color and Overlay style: Solid covers the media evenly, Gradient fades the color out. Gradient direction (Up or Down) sets which way it fades.

The Custom CSS tab lets you add your own CSS to this hero only.

Common tasks

• Header over the hero: turn on Transparent header in the header settings. It only works when the hero sits directly under the header. See Header settings.
• Centered title and button: Direction Vertical, then Position and Alignment on Center.
• White text on a bright photo: turn on Media overlay with a dark Overlay color and the Gradient style.

Good to know

• If a hero video does not move, check Autoplay Videos in the Automations settings tab. When it is off, background videos stay still. See Automations settings.
• If the size of your first image is not known, the Image height uses Medium instead.
• You need a banner on another page? The hero is home only, but the Image section works on any page. See Text, image, and divider sections.