Hero
How to write the Hero headline, set its buttons and stats, and show a featured product beside it.
The Hero is the first thing on the home page: an eyebrow line, a large heading with an optional blinking cursor, body text, up to two buttons, up to four stats, and a featured product panel. It's available on the home page only.
A newly added Hero starts with the eyebrow "// Transmission 012", the heading "Gear that boots first try.", the primary button label "Browse all units" and the panel label "Unit of the cycle". It has no stats until you add them.
Layout
On wide screens the Hero has two columns: the copy on one side and the featured unit panel on the other. With no product chosen, the copy has the full width. On screens narrower than about 725 px, such as phones and small tablets, the panel moves below the copy.
Copy
| Setting | Notes |
|---|---|
| "Eyebrow" | A short line above the heading, in small monospace type. Leave it empty to hide it. |
| "Heading" | The page's main heading. Keep it to one idea. Left empty, the Hero shows your shop name, so the page keeps its main heading. |
| "Show cursor" | Adds a blinking block after the heading. |
| "Body" | Rich text under the heading. Leave it empty to hide it. |
Buttons
| Setting | Notes |
|---|---|
| "Primary button label" | The main button, filled. Leave it empty to hide the button. |
| "Primary button link" | Appears once the label has text. If you leave the link empty, the button goes to your all-products collection. |
| "Secondary button label" | A second button in the accent color. Leave it empty to hide it. |
| "Secondary button link" | Appears once the label has text. If you leave the link empty, the button goes to your home page. |
Stats
Add up to four Stat blocks. Each has a "Value", shown large, and a "Label", shown small underneath. Use them for short facts shoppers care about, such as your real dispatch time, warranty or returns window. Only state what your store actually offers.
A newly added Hero, and the Hero on the default home page, has no Stat blocks, so the row is hidden until you add one. Remove every Stat block to hide it again.
On phones, up to three stats sit side by side in one row. Four stats make two rows of two. With a larger Theme settings › Typography › "Base text size", the stats wrap to two rows rather than break a word. Keep labels to a word or two, since each stat is about 110 px wide on a phone.
Featured unit
Under the "Featured unit" heading:
| Setting | Notes |
|---|---|
| "Product" | The product to show in the panel. Leave it empty to hide the panel. |
| "Panel label" | The label in the panel's header strip, such as "Unit of the cycle". Appears once a product is chosen. If empty, the product type is used. |
The panel shows the product's image, title, price, SKU and type, stock status, the first 26 words of the description, and an "Inspect unit" button that opens the product page. Stock status updates with your inventory.
The featured unit's image loads with high priority, because it's usually the largest image on the first screen.
Motion
The Hero's eyebrow, heading, body, buttons, stats and panel fade in one after another when "Show boot sequence on load" is on in Theme settings › Motion and effects. See Motion, effects & voice.
Recipes
Text-only hero
- "Product": empty
- Stat blocks: removed
- "Body": two sentences on what you sell
Hero that sells one product
- "Product": your best seller
- "Panel label": "Best seller"
- "Primary button label": "Shop all", "Primary button link": your main collection
See also
- Home page: where the Hero fits
- Product sections: Featured product, for a buyable product on the page