Appearance
Parallax
A full-width image band with a heading, supporting text, and button overlaid. Great for breaking up content sections.
Try it
Change the settings below and watch the preview update in real time. Click Split to see settings and preview side by side, or use the tabs to switch between them.
Storefront preview
Image sizes
The image is requested at 2000px wide and drifts as the visitor scrolls, so it is always taller than the band it fills. A tall or square photo survives that better than a wide one, and the subject should sit near the centre.
Settings
| Setting | What it does |
|---|---|
| Color scheme | Picks which set of colors the button uses. The overlay text is always white. |
| Image | The background image — use something at least 1920px wide |
| Section height | Sets the band's minimum height, 300–800 pixels; it still grows to fit its content |
| Overlay opacity | How much the dark layer dims the image, 0–90%, so the text stays readable |
| Heading | The main text displayed over the image |
| Text | A supporting message below the heading |
| Button label | What the button says. Leave empty to hide the button |
| Button link | Where the button takes people when clicked |
| Text alignment | Aligns the text to the start, centre, or end of the band |
Blocks
This section does not use blocks.
When it isn't showing
The section always renders and reserves its full height, so with no Image you get an empty band rather than nothing at all. Add the image; fill in a Heading or Text if you want copy over it.
Visitors with reduced motion turned on see the image still rather than drifting, which is deliberate.
Tips
- The image drifts gently as shoppers scroll — the depth effect the section is named for. It turns itself off for shoppers who prefer reduced motion, and older browsers simply show the image still.
- Choose an image with a clear focal point that won't get cropped awkwardly. Landscape photos with a centered subject work best.