Transition hero

The Transition hero is Propel's main homepage banner. It holds up to three campaign slides. Each slide pairs a campaign image (and optional video) with a heading, text, buttons and a product callout. Shoppers move between slides with the slide controls.

For a full list of settings, see the Transition hero section reference.

Where to set it up

Go to Online Store > Themes > Customize.
Open the home page.
Select the Transition hero section, or add it with Add section.

A new Transition hero starts with three Hero slide blocks. You can remove slides, but a section can hold no more than three.

Section settings

These apply to every slide in the section.

Setting	Default	What it does
Autoplay slide videos	On	Videos are always muted. When off, the poster shows and the shopper starts the video with the play control.
Product card label	Featured	Small text on the product card, for slides whose Product display is Product card.

Hero slide settings

Image

Setting	What it does
Image	Used on tablets and desktops. Keep the subject on the left, as the product and text sit on the right.
Mobile image	Used on phones (narrower than 640px). If blank, phones show the theme's built-in artwork, not your Image, so add one whenever you change Image.
Mirror the image in right-to-left languages	On by default. Flips the image and video so the layout reads the same way in Arabic and other right-to-left languages. Turn it off for an image with text or a logo in it.
Image tag	A short word shown on the image, for example Train.

Alt text and the focal point come from the image itself, not from the theme editor. To change them, go to Content > Files, open the image and edit its alt text or focal point.

Video

Setting	What it does
Campaign video	Plays muted and on a loop over the image.

How the video behaves:

It is always muted.
It plays only while its slide is showing, and only when Autoplay slide videos is on and the shopper has not paused it.
The slide's Image is used as the poster until the video plays.
Visitors who have reduced motion turned on in their device settings see the image instead of the video.

Product

Setting	What it does
Product display	Product image shows a tall product shot beside the campaign image. Product card shows a small card with the product's photo, price and link. None shows neither.
Product image	Shown when Product display is Product image.
Product image caption	Shown under the product image, for example Rain jacket · Outerwear.
Product for the card	Shown when Product display is Product card.
Card link text	Shown on the product card. Leave blank to use View product.

Text

Setting	What it does
Eyebrow	A short line above the heading.
Heading	The slide's main heading.
Heading level	H1 or H2. Use H1 only when this hero is the page's main heading, and only on the first slide. Set the other slides to H2.
Text	A short description of the collection or campaign.

Buttons

Setting	What it does
First button label	Default Shop now.
First button link	Where the first button goes.
Primary button style	Primary, Secondary or Text link.
Second button label	Default Learn more.
Second button link	Where the second button goes.
Secondary button style	Primary, Secondary or Text link.

A button shows only when it has both a label and a link. Leave either blank to hide that button. Primary is the filled button, Secondary the outlined one, and Text link a bold link with a rule.

Tips

Add a Mobile image to every slide. Phones crop differently, and a blank Mobile image falls back to built-in artwork rather than your desktop Image.
Keep one H1 per page. If the page already has a main heading elsewhere, set every slide to H2.
If a slide's image contains text or a logo, turn off Mirror the image in right-to-left languages so it does not appear reversed in Arabic.