Scroll story
ProContentv1.1.0
Turn your brand or product story into a guided scroll. Each step has a label, a large title, text, an optional link and its own image or short video. On wide screens the media stays in view and changes as each step reaches the middle of the screen (a soft crossfade, a reveal, a rise or a zoom); the step in focus is full strength while the others grey back, and an index of ticks at the edge marks where the story is. On phones each step carries its own media, so nothing is hidden. Videos play muted and only while their step is in view.
Good for: Brand or founder story · How it's made · Product walkthrough
When to use it
Use it on your home page, an About page or a product page to tell a story in a few steps: where your brand began, how a product is made or how to use it.
- One idea at a time. Each step has a label, a large title, a few lines of text and an optional link. The step being read stands out while the others fade back.
- Pictures that follow the reader. On wide screens the image or video stays in view and changes as each step reaches the middle of the screen.
- Nothing lost on phones. On smaller screens each step shows its own image or video above its text.
Set it up
Add the section
On your home page or a page template, choose Add section and pick SU: Scroll story. It starts with three Step blocks.
Write each step
Select a Step block and fill in its Title and Text. Eyebrow adds a short label above the title. To add a button, fill in both Link label and Link. Add another Step block for each part of the story, up to 8.
Add a picture or video to each step
Pick an Image for every step, or a Video, which replaces the image. Videos play muted and looped, and only while their step is in view. A step without an image or video keeps the one before it on your store (the theme editor shows example art for it).
Place the media
Media position puts the pictures on the Left or Right. Media shape is Portrait (4:5), Square or Landscape (4:3).
Choose how the media changes
Media change sets the transition between steps: Fade, Reveal, Rise or Zoom. Shoppers who prefer reduced motion see a plain fade.
Show the way
Show progress adds a tick for each step at the outer edge, with the current one longer and numbered. Number the steps puts 01, 02 and so on in each step’s label.
The sticky picture shows on screens 990px wide and up. In the theme editor, switch the preview to mobile to check how the steps stack on phones. Selecting a Step block scrolls the preview to it.
Try it
Settings
In the theme editor, in the order you'll see them. Every section also has the heading and style settings.
Story
| Setting | What it does |
|---|---|
| Media positionDropdown | |
| Media shapeDropdown | |
| Media changeDropdown | Shoppers who prefer reduced motion see a plain fade. |
| Show progressCheckbox | A tick per step at the outer edge; the current one is longer, with its number. |
| Number the stepsCheckbox |
Blocks go inside the section: use Add block, up to 8 in all, and drag them to change the order.
Block: Step
| Setting | What it does |
|---|---|
| EyebrowText | |
| TitleText | |
| TextRich text | |
| ImageImage | |
| VideoVideo | Plays muted and looped while its step is in view. Replaces the image. |
| Link labelText | |
| LinkLink |
Good to know
- Up to 8 steps.
- The sticky frame shows on screens 990px and wider; smaller screens stack each step with its media.
- Without JavaScript every step shows in full with its own image.
Changelog
- 1.1.0: Redesigned: a label with the step number, larger titles, the step in focus at full strength with the others greyed back, and an index of ticks beside the steps. New Reveal transition; Fade now settles from a slight zoom. The active step follows the scroll position on every frame and works in themes that scroll their own wrapper (such as Horizon on desktop), so no step is skipped.
- 1.0.0: Initial release.