Hero
Transition hero
Section handle:
transition-hero
Settings
| Setting | Type | Default | Description |
|---|---|---|---|
| Autoplay slide videos | Toggle (on/off) | On | Videos are always muted. Off: the poster shows and the shopper starts the video with the play control. |
| Product card label | Text | Featured | Small text on the product card, for slides whose Product display is Product card. |
Blocks
Hero slide
Block type:
slide
Image
| Setting | Type | Default | Description |
|---|---|---|---|
| Image | Image | — | Used on tablets and desktops. Keep the subject on the left, as the product and text sit on the right. Alt text and focal point come from the image itself. |
| Mobile image | 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 | Toggle (on/off) | On | Flips the image and video so the layout reads the same way in Arabic and other right-to-left languages. Turn off for an image with text or a logo in it. |
| Image tag | Text | — | A short word shown on the image, for example Train. |
Video
| Setting | Type | Default | Description |
|---|---|---|---|
| Campaign video | Video | — | Muted and loops over the image, showing its own preview frame until it plays. With reduced motion on, the image shows instead. |
Product
| Setting | Type | Default | Description |
|---|---|---|---|
| Product display | Dropdown | image | Product image: a tall product shot beside the image. Product card: a small card with the product’s photo, price and link. · Options: image – Product image, card – Product card, none – None |
| Product image | Image | — | Shown when Product display is Product image. If blank but a caption is set, a built-in product photo is used. |
| Product image caption | Text | — | Shown under the product image when Product display is Product image, for example Rain jacket · Outerwear. |
| Product for the card | Product | — | Shown when Product display is Product card. |
| Card link text | Text | View product | Shown on the product card. Leave blank to use View product. |
Text
| Setting | Type | Default | Description |
|---|---|---|---|
| Eyebrow | Text | — | A short line above the heading. |
| Heading | Text | Introduce your collection | — |
| Heading level | Dropdown | h1 | Use H1 only when this hero is the page's main heading, and only on the first slide. Set the other slides to H2. · Options: h1 – H1, h2 – H2 |
| Text | Rich text | <p>Tell shoppers what this collection or campaign is about.</p> | — |
Buttons
| Setting | Type | Default | Description |
|---|---|---|---|
| First button label | Text | Shop now | Leave the label or link blank to hide the button. |
| First button link | URL / Link | — | Where the first button goes. Leave blank to hide the button. |
| Primary button style | Dropdown | primary | Style of the link beside the heading. Links on points are always text links. · Options: primary – Primary, secondary – Secondary, link – Text link |
| Second button label | Text | Learn more | Leave the label or link blank to hide the button. |
| Second button link | URL / Link | — | Where the second button goes. Leave blank to hide the button. |
| Secondary button style | Dropdown | secondary | Primary is the filled button, Secondary the outlined one, Text link a bold link with a rule. · Options: primary – Primary, secondary – Secondary, link – Text link |
Default Configuration
When you add this section from the Theme Editor, it comes pre-configured with:
- Transition hero — 3× Hero slide