Image Banner - Block Hero Help Center

Use Image Banner for a full-width banner, such as a hero at the top of your home page or a promo banner on a collection page. Each piece of content has its own desktop and mobile image, and can add a heading and up to two buttons.

Content per schedule

One banner at a time. Each banner you schedule has its own Start date and End date, and the block shows the one that’s live now. See When content goes live.

What you schedule in Block Hero

On the block’s page, click Schedule content. The Schedule Image Banner content form has these fields. Content Name and Desktop Image are required.

Image Banner block page > Schedule content > Schedule Image Banner content: the Scheduling, Content and Optional content groups with all fields

Field	What it does on your store
Content Name	For your reports only. Shoppers don’t see it.
Desktop Image	The banner image on desktop.
Mobile Image	The banner image on phones (screens narrower than 750 pixels). Optional: leave it empty and phones show the Desktop Image.
Redirect URL	Where the banner goes. With no buttons, the whole banner links here. Once you add a button, the banner itself stops linking and the Button Label button links here.
Image alt text	Describes the image for screen readers. Block Hero fills it in from the link and heading and shows Auto-filled. You can type your own. See How alt text is filled in.
Heading	Large text on the banner.
Subheading	Smaller text under the heading.
Button Label	The first button’s text. It links to the Redirect URL.
Secondary Button Label	A second button’s text.
Secondary Button URL	Where the second button goes.

What you set in the theme editor

These settings are on the block in the theme editor. They stay the same whatever you schedule.

Setting	What it does
Block ID	The ID you copy from the block’s page in Block Hero.
Above the fold	Turn on when this banner is the first thing visible on the page. Its image loads first. On by default.
Image overlay opacity	Darkens the image, from 0% to 100%.
Banner height	Adapt to image, Small, Medium or Large.
Desktop content position	Where the text sits on desktop, from Top left to Bottom right.
Show text box on desktop	Shows a box behind the text on desktop.
Desktop content alignment	Left, Center or Right.
Color scheme	The color of the text box background.
Mobile content alignment	Under Mobile layout: Left, Center or Right.
Show text below images on mobile	Under Mobile layout: puts the text under the image on phones.

If a banner has no Heading, Subheading, Button Label or Secondary Button Label, and its desktop image is at least three times as wide as it is tall, the banner shows the whole image instead of using Banner height.

Add a block to your theme

Copy the Block ID and add the block in the theme editor.

Create a schedule

Choose what the banner shows and when.