Hero
The section that opens the Index home page – a large headline and a short text beside a framed image or video, with buttons and quick links to your most popular collections.
- In the editor
- Hero
- Where it goes
- Any page template, with Add section
- In the presets
- Index: Home page
- Settings
- 33
- Blocks
- Quick link
- App blocks
- Yes
When to use it
The hero is the first thing shoppers read. It suits stores that sell a broad range: rather than one big campaign photo, it pairs a clear promise (Everything for a calm home) with quick links to the places most visitors want to go next. For a full-bleed campaign image, use the Image banner or the Slideshow instead.
Set it up
- Write the Heading – one sentence about what you sell and why it is good. Short words, no full stop needed.
- Add a Text of one or two lines underneath.
- Set the First button to your main collection and, if you like, the Second button to something softer (Our story, New in).
- Upload an Image. A landscape photo of products in use works best; add a Mobile image for a different crop on phones.
- Add Quick link blocks for your three to six most popular collections or searches, and set Label before the links (for example Popular now).
Layout
- Text and image side by side: the Index look – text on the left in a column of the width you choose (Narrow, Medium, Wide), image on the right.
- Text above a wide image: the headline on top, a wide image below. Calmer, more editorial.
- Text only: a typographic opening with no image.
Vertical alignment places the text at the top, middle or bottom of the image. Show image first on mobile puts the picture above the text on phones.
Image
- Image ratio: Fill the hero height makes the image exactly as tall as the text column beside it, never taller than Minimum image height allows. Or pick a fixed shape – wide 16:10, landscape 4:3, square, portrait – or Adapt to image. On phones and in the Text above a wide image layout, Fill becomes 4:3 or 16:10.
- Video: an uploaded video plays muted on a loop instead of the image. Keep it short and calm; the image stays as the poster.
- Caption and Caption link: a small white pill in a corner of the image – Shop the kitchen → – pointing to what is in the photo. Caption position picks the corner.
Motion
Animate text and image on load lets the headline and image settle in gently when the page opens. It is off for shoppers who reduce motion. The hero's own Animate on scroll is off by default, because it is already in view when the page loads.
Quick links
Each Quick link block is a small chip with a label and a link. Point them at collections, at a search (/search?q=linen) or at a page. Four to six chips fit on one line on desktop; on phones they wrap neatly.
All settings
Every setting in the order of the theme editor, with its options and its default value.
Section: Hero33 settings
| Setting | Options | Default |
|---|---|---|
| Layout | Text and image side by side · Text above a wide image · Text only | Text and image side by side |
| Text column | Narrow · Medium · Wide | Medium |
| Vertical alignment | Top · Middle · Bottom | Top |
| Show image first on mobile | Checkbox | Off |
| Animate text and image on load | Checkbox | On |
| Text | ||
| Heading | Rich text (one line) | Sample text |
| Heading size | Extra large · Large · Medium | Extra large |
| Text | Rich text | Sample text |
| Text alignment | Left · Center | Left |
| Buttons | ||
| First button label | Text | – |
| First button link | Link | – |
| First button style | Solid · Outline | Solid |
| Second button label | Text | – |
| Second button link | Link | – |
| Second button style | Solid · Outline | Outline |
| Quick links | ||
| Add Quick link blocks to show small links under the text. | ||
| Label before the links | Text | Sample text |
| Image | ||
| Image | Image | – |
| Mobile imageOptional. | Image | – |
| VideoOptional. Plays muted on a loop instead of the image. | Video file | – |
| Image ratioFill the hero height: next to the text the image is as tall as the text column. On mobile and above the text it is 4:3 and 16:10. | Fill the hero height · Wide (16:10) · Landscape (4:3) · Square · Portrait · Adapt to image | Fill the hero height |
| Minimum image height | 320–800px | 520px |
| CaptionSmall label in the corner of the image. | Text | Sample text |
| Caption link | Link | – |
| Caption position | Bottom left · Bottom right · Top left | Bottom left |
| Colors | ||
| Color scheme | Color scheme | Scheme 1 |
| Section spacing | ||
| Top padding | 0–160px | 56px |
| Bottom padding | 0–160px | 40px |
| Top padding on mobile | 0–120px | 28px |
| Bottom padding on mobile | 0–120px | 24px |
| Advanced | ||
| Hide on mobile | Checkbox | Off |
| Hide on desktopMobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| Animate on scroll | Checkbox | Off |
| Anchor IDLink to this section with #anchor-id. | Text | – |
Block settings
Block: Quick link2 settings
| Setting | Options | Default |
|---|---|---|
| Label | Text | Sample text |
| Link | Link | – |