Hero banner

The Hero banner is your store’s first impression: a large headline with one highlighted word, a photo, and up to two links. Two layouts cover everything from a split composition to a full-bleed background photo.

What it does

Use it once, at the top of the home page (or a landing page). It works with images only — for a video hero, use a Video or Media with text section instead.

The headline supports an accent word: part of the heading renders in the theme’s accent color, which gives the banner its designed look.

Add it to a page

In Shopify admin, go to Online Store → Themes and click Edit theme. (Older admin versions label this button Customize.)
Open the home page template.
Click Add section and choose Hero banner.
Set your heading, accent word, text, and image or background photo.
Save.

Choose a style

The Layout setting switches between two looks:

Style	Look
Split image and text (default)	Text on one side, an image (a transparent cutout works best) on the other, over the page background
Full background	A photo covering the whole section with a soft gradient behind the text; height controlled by Banner height

In both layouts you can place a full-width background photo behind everything, with its own mobile version, gradient overlay, and text color.

Set it up: quick start

Add the section and keep the Split image and text layout.
Split your headline: put the main words in Heading (e.g. “Happy”) and the word to highlight in Accent heading word (e.g. “Pet”).
Upload an Image — a transparent PNG cutout sits directly on the page background and looks most designed.
Set First button label and Link to your main collection.
Save and check both the desktop and the phone preview — on phones the image moves below the text.

Settings

Section settings

Layout and content

Setting	Default	Options	What it does
Layout	Split image and text	Split image and text / Full background	Switches the overall look
Banner height	Medium	Small / Medium / Large	Section height. Full background layout only — very long text can still grow taller
Eyebrow	Empty	Text	Small line above the heading
Heading	“Happy”	Text	The main headline
Accent heading word	“Pet”	Text	The word shown in the accent color. Leave empty for a single-color headline
Text	(demo paragraph)	Text	Short intro under the heading
Image	Empty	Image picker	The photo in the Split layout. Transparent PNG cutouts work best — the image sits on the page background

Section background (both layouts)

Setting	Default	Options	What it does
Background color	Empty	Color	Solid color behind everything. If left empty, the theme background color is used
Background image	Empty	Image picker	Full-width photo behind the section in both layouts. Recommended 2400×1000 px, subject on the right with text space on the left; set a focal point to control cropping. Background photos are decorative — keep essential information in the text fields
Mobile background image	Empty	Image picker	Optional photo for screens below 750 px. Recommended 900×1400 px with space for text at the top. Falls back to Background image
Overlay color	Empty	Color	Color of the soft gradient behind the text. If left empty, the section background color is used
Overlay opacity	85 %	0–100 %, step 5	How strong the gradient is — raise it if text is hard to read on a busy photo
Text color	Empty	Color	Heading, eyebrow, and body text. If left empty, theme colors are used. Accent words and buttons keep theme colors — check the contrast against your photo

Buttons

Setting	Default	Options	What it does
First button label	“Shop now”	Text	The main button; leave empty for no button
Link	Empty	URL	Where the main button leads
Arrow circle link	Empty	URL	A second link drawn as a round arrow button beside the main one — handy for “continue browsing” style actions

Floating badge

Setting	Default	Options	What it does
Rotating badge text	“Ensure the well-being of your pets”	Text	Words spinning in a circle as a decorative badge. Leave empty to remove it
Show floating heart	On	On / Off	A small floating heart next to the badge

Images and content tips

Split layout image: a transparent PNG cutout looks best — the image sits directly on the page background.
Background image (desktop): 2400×1000 px, keep the subject on the right and leave the left side calm for text. Set a focal point in the image editor to control cropping.
Background image (mobile): 900×1400 px with text space at the top; without it, the desktop photo is used and cropped.
Decorative means decorative: background photos can crop unpredictably across screen sizes, so never place essential information only in the photo.

Good to know

The banner has no video. For motion, use the Video section or a Multi-video banner below the hero.
The rotating badge pauses when the store’s animation setting is off, and respects shoppers’ reduced-motion preference.
Accent words and buttons always use theme colors, even when you set a custom text color — this keeps the call-to-action consistent store-wide.
On phones the split layout stacks: text first, image below.

Example setups

Classic storefront. Split image and text, transparent pet cutout, heading “Happy” + accent “Pet”, one “Shop now” button to the best-sellers collection, rotating badge on, heart on.

Campaign splash. Full background, Large height, campaign photo (2400×1000) with a mobile version, Overlay opacity 90 % for readable white text, button to the sale collection, badge removed.

Common questions

My text is hard to read over the photo. Raise Overlay opacity, or pick a darker Overlay color. If it’s still busy, use the mobile background image with more empty space at the top.

The accent word is the wrong color. Accent words use the theme’s accent color from the global color settings — the banner doesn’t pick its own.

My cutout photo shows a white box behind it. The image file has a white background baked in. Re-export it as a transparent PNG.

The rotating text badge is distracting. Clear the Rotating badge text field to remove it, or turn off Show floating heart separately.