Scrollytelling
Scrollytelling tells a story in chapters. On a wide screen the chapter images hold still in one column while the text scrolls past in the other, and the image changes as each chapter’s text reaches the middle of the screen. Each image can carry product hotspots, so the story is shoppable as it goes.
On screens narrower than 990 px the chapters simply stack, each with its own image above its text.
It can’t be placed in the header or footer groups. The preset starts with three chapters, each with one hotspot.
Settings
- Color scheme. Default: scheme-1.
Spacing
- Top padding / Bottom padding. Range: 0 to 300 px in 5 px steps. Default: 60 px each.
Blocks
A scrollytelling section with no chapters shows nothing on the storefront.
Chapter
- Image. The chapter’s image. Without one, a placeholder illustration shows.
- Heading. Default:
Chapter heading. - Text. Rich text shown under the heading.
Each chapter takes up to four Hotspot blocks. More can be added in the editor, but only the first four show.
Hotspot
- Product. The product this hotspot points to. A hotspot with no product shows nothing on the storefront; in the theme editor it shows a placeholder so you can place it first.
- Horizontal position / Vertical position. Where the marker sits on the image, measured from the left and top edges. Range: 0% to 100% in 1% steps. Default: 50% each.
- Card side. Which side of the marker the product card opens on. Right (default) or Left. On phones the card spans the image, under the hotspot, or over it when the hotspot is in the lower half.
Pressing a marker opens a small card with the product’s image, title and price, linked to the product. The chapter’s products are also listed under its text, so they can be reached without the markers.
Tips
- Write short chapters. The image changes when the text passes the middle of the screen. A long chapter holds one image for a long scroll and loses the effect.
- Use images of the same shape. The images share one column, so matching aspect ratios keep the column from jumping between chapters.
- Place hotspots on the product itself, not near it. Shoppers read a marker as “this thing”, so a marker on the jacket’s collar is clearer than one in the space beside it.
- Three to five chapters. Enough to feel like a story, few enough that shoppers reach the end.