About this section
A hero slider with soft color light behind a product picture that leans toward the pointer. Each slide is a block with its own eyebrow, heading, text and two buttons.
How to add itCustomize → Add section
Where it can goAny page
Settings15 · 1 block type
Good to know: Upload a product shot with a transparent background as the slide's foreground for the strongest effect.
Settings
| Setting | Type | What it does |
|---|---|---|
| Color scheme | Color scheme | Drives the scrim, 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. |
| Scrim 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. |
Motion
| Setting | Type | What it does |
|---|---|---|
| Pointer tilt | Slider | How far the layers lean toward the cursor. 0 turns the 3D off and leaves a clean cross-fade. Ignored on touch devices and for visitors who ask for reduced motion. From 0 to 100 %, 60 % to start. |
| Film grain texture | On / off | On by default. |
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 3 to 12 s, 6 s to start. |
| Show slide counter | On / off | On by default. |
| Day and evening switch | On / off | A button in the hero that turns the whole store between light and dark mode. Pictures and films with a dark version change with it. Off by default. |
| Label to switch to dark | Text | — |
| Label to switch to light | Text | — |
| 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 |
|---|---|---|
| Background 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 | Plays muted and looped in place of the image. The image above becomes its poster frame, so set both. Choose a video uploaded to your files. |
| External video URL (.mp4) | Text | Only used when no Shopify video is selected. |
| Text over the light version | Choice | For a bright picture or film. Dark text and a pale veil take over whenever the light version is showing, and fade with it. Choose Section color scheme, Dark text on a light veil. Section color scheme to start. |
Dark mode
| Setting | Type | What it does |
|---|---|---|
| Picture focus on phones | Slider | Which part of the picture or film stays in view on a narrow screen. 0% is the left edge; 50% follows the image focal point. From 0 to 100 %, 50 % to start. |
| Dark mode image | Image | Choose an image from your files. |
| Dark mode video | Video | For the smoothest change, use a film the same length as the light one. Choose a video uploaded to your files. |
| Dark mode video URL | Text | — |
| Cut-out image | Image | A product on a transparent background (.png or .webp). This is the layer that appears to float. Choose an image from your files. |
| Accent color | Color | Lights the haze behind the product, and the gradient when there is no image. #8fe3d0 to start. |
| Eyebrow | Text | — |
| Heading | Text with bold, italic and links | — |
| Heading size | Choice | Choose Medium, Large, Extra large. 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