About this section
A hero slider where each new slide arrives behind panels that lift like a curtain. The heading has two lines, so the second can be set in the accent italic.
How to add itCustomize → Add section
Where it can goAny page
Settings13 · 1 block type
Good to know: Pick a dark color scheme for light text over photographs, and keep slides to three.
Settings
| Setting | Type | What it does |
|---|---|---|
| Color scheme | Color scheme | Drives the wash, the type and the buttons. Pick a dark scheme for light type over a dark image. One of the colour schemes from Theme settings → Colors. |
| Height | Slider | From 34 to 88 rem, 62 rem to start. |
| Wash strength | Slider | Darkens the image behind the text so the heading always passes contrast. From 0 to 90 %, 70 % to start. |
| Content position | Choice | Choose Left, Center, Right. Left to start. |
The wipe
| Setting | Type | What it does |
|---|---|---|
| Panels | Slider | Fewer, wider panels suit detailed photography. More, thinner panels suit flat color. From 3 to 8, 5 to start. |
| Panel delay | Slider | How far each panel trails the one before it. From 0 to 200 ms, 70 ms to start. |
| Wipe direction | Choice | Choose Up, Down, Alternating. Up to start. |
Slideshow
| Setting | Type | What it does |
|---|---|---|
| Rotate slides automatically | On / off | Pauses on hover, on keyboard focus, while the section is off screen, and whenever the shopper presses pause. On by default. |
| Change slides every | Slider | From 4 to 12 s, 7 s to start. |
| Show slide counter | On / off | On by default. |
| Slideshow description | Text | Read out by screen readers to describe what this hero is for. |
Padding
| Setting | Type | What it does |
|---|---|---|
| Top | Slider | From 0 to 100 px, 0 px to start. |
| Bottom | Slider | From 0 to 100 px, 0 px to start. |
Blocks
Blocks are added inside the section with Add block, and can be reordered by dragging.
Slide
| Setting | Type | What it does |
|---|---|---|
| Image | Image | Landscape, at least 2000px wide. Leave empty to use a gradient built from the accent color. Choose an image from your files. |
| Video | Video | A video cannot be cut into panels, so a video slide opens the other way round: the panels become the curtain and draw back off the picture. Set the image too — it is the poster frame. Choose a video uploaded to your files. |
| Dark mode video | Video | Plays instead of the video above while the store is in dark mode, from the same moment. Use a film of the same length. Choose a video uploaded to your files. |
| External video URL (.mp4) | Text | Only used when no Shopify video is selected. |
| Accent color | Color | Colors the curtain panels, and the gradient and thumbnail when there is no image. #f3c9a7 to start. |
| Eyebrow | Text | — |
| First heading line | Text with bold, italic and links | — |
| Second heading line | Text with bold, italic and links | Sets a beat after the first line. Italics here read as the accent of the pair. |
| Heading size | Choice | Choose Medium, Large, Extra large. Extra large to start. |
| Text | Formatted text | — |
| First button label | Text | — |
| First button link | Link | A link to any page. |
| Use outline button style | On / off | Off by default. |
| Second button label | Text | — |
| Second button link | Link | A link to any page. |
| Use outline button style | On / off | On by default. |
Something here not as described?Tell us which setting and what you saw. We reply within two business days.
Contact support