Hero banner
A high-impact opening banner with an image or video, an oversized heading, scrolling text and a logo that shrinks as customers scroll.
The Hero banner section is a high-impact opener for the top of a page. It shows an image or a video with your description and button, and you can layer an oversized heading, a scrolling text line and a large logo on top. Each layer can be positioned on its own.
1. Our guide to set up a Hero banner section:
The section is added with a Scrolling text block. You can also add a Heading block and a Logo image block, one of each.
2. Section settings
Media
Image: The banner image.
Mobile image: An optional image for mobile. If you leave it blank, mobile shows the Image.
Video: A video uploaded to your Shopify files. The video overrides the image if both are set.
Image link: Makes the banner clickable.
Media overlay opacity: Darkens the image or video so text stands out, 0–100%.
Desktop banner height: Small / Medium / Large / Custom.
Custom height: 250–850px. Only applies when Desktop banner height is set to Custom.
Adapt section height to image size: The banner takes the shape of your image. This overrides Desktop banner height and Mobile banner height. It doesn't apply to videos.
Content settings
Description: Supporting text shown on the banner.
Content width: The maximum width of the description and button, 200–800px.
Button label and Button link: Adds a button. Leave the label blank to hide it.
Use outline button style: Shows the button with an outline instead of a solid fill.
Content position: Where the description and button sit: Top, Middle or Bottom, combined with Left, Center or Right.
Colors
Text: The color of the description. The Heading and Scrolling text blocks are always shown in white.
Button label, Button background and Button outline: The colors of the button. Button outline applies when Use outline button style is on.
Mobile layout
Mobile banner height: 150px / 250px / 350px / 450px / 550px / 650px / 750px.
Mobile content alignment: Left / Center / Right.
Section padding
Top padding: 0–100px.
Bottom padding: 0–100px.
3. Block settings
Heading block
A large heading layered on the banner. You can add one per section.
Heading: The heading text.
Desktop font size scale: 100–300%.
Mobile font size scale: 100–300%.
Content width: The maximum width of the heading, 300–1600px.
Heading position: Where the heading sits, separately from the description and button: Top, Middle or Bottom, combined with Left, Center or Right.
Block spacing
Top padding: Space between the top of the banner and the heading, 0–500px. Only applies when Heading position is set to a Top option.
Logo image block
Shows a large logo in the middle of the banner. As customers scroll down, the logo shrinks and moves down. If you don't add an image, your store name is shown. You can add one per section.
Image: The logo for desktop.
Mobile image: An optional logo for mobile. If you leave it blank, mobile shows the Image.
Scrolling text block
A line of text that moves across the banner in a loop. You can add one per section.
First text, Second text and Third text: The messages to show. Leave a field blank to skip it.
Text size: 15–80px.
Space between text: The gap between messages, 0–100px.
Text position: Top / Middle / Bottom.
Direction: Left / Right.
Speed: Slow / Normal / Fast.
Block spacing
Top padding: Space between the top of the banner and the text, 0–500px. Only applies when Text position is set to Top.
4. Tips
Use the Hero banner as the first section on your home page, where the large heading and logo have the most impact.
Set a smaller Mobile font size scale than on desktop, so long headings fit on phone screens.
Raise Media overlay opacity if your heading or text is hard to read over the image or video.
Last updated
Was this helpful?