Pro
← All sections
Scroll Story
A pinned visual that changes chapter by chapter as shoppers scroll through your story.
Install
One file: sections/mf-scroll-story.liquid. It appears in the theme editor as EX · Scroll story.
- Connect EXPERAISE Sections to Claude (once). In Claude Code:In the Claude app: Settings → Connectors → Add custom connector →
claude mcp add --transport http experaise-sections https://sections.experaise.com/api/mcp --header "Authorization: Bearer YOUR_LICENSE_KEY"https://sections.experaise.com/api/mcp. Full setup - Ask Claude. It fetches
sections/mf-scroll-story.liquid, pushes only that file to your theme with Shopify CLI, and tells you where to find it.Install the EXPERAISE Sections section "Scroll Story" (scroll-story) on my Shopify store your-store.myshopify.com. Put it on an unpublished copy of my live theme, then tell me how to add it in the theme editor. - Customize. Online Store → Themes → Customize → Add section → EX · Scroll story. Every text, color and product is a setting.
Pro
The Liquid for Scroll Story is part of Unlimited
The live preview is free for everyone. Unlimited unlocks the installable file for every Pro section, Claude installs with your license key, and new drops every week.
Why it converts
A paced, visual narrative builds desire and answers objections before the price for high-consideration products.
Specs
About this section
Scroll Story is a Pro Shopify Online Store 2.0 section for sticky, chapter-by-chapter storytelling. On desktop a tall visual stays pinned on one side while three to six chapters scroll past on the other. As each chapter reaches the middle of the screen, an IntersectionObserver switches the visual: the new image crossfades in from a slight zoom, a vertical progress indicator advances, the chapter's rail fills with its accent colour and the other chapters dim. Each chapter block has a name, heading, rich text, an optional key figure with a label, an image, an accent colour and a choice of five designed artworks (sun and dunes, droplet and rings, vial and chart, parcel and route, bottle and halo) that appear, tinted in the chapter colour, whenever no image is set. The section closes with a call to action that can show a product's image, title, price and compare-at price beside a button and a secondary link. Merchants also set the intro eyebrow, heading and text, the side of the visual, chapter height, an offset for sticky theme headers, labels, progress, dimming, padding and four colours. On tablets and phones there is no sticky pane: each chapter shows its own visual beside or above its text. The conversion principle is narrative pacing: considered purchases convert when shoppers understand the sourcing, science and proof behind the price, one step at a time. It is one self-contained file with no external assets; keyboard focus also moves the story and reduced motion removes the zoom, float and slides.
Questions
How does the visual know which chapter to show?
An IntersectionObserver watches a thin band across the middle of the screen. When a chapter crosses it, that chapter becomes active and its visual fades in. Keyboard focus inside a chapter activates it too. If the whole section fits on screen without scrolling, hovering a chapter switches the visual instead, and the last chapter is lengthened while scrolling so it is read before the visual unpins.
Do I need an image for every chapter?
No. When a chapter's Image setting is empty it shows a designed CSS artwork tinted with its chapter colour. Choose one of five motifs with Artwork when there is no image, or leave it on Automatic. When you add your own, portrait images work best; they are lazy-loaded and get a soft shade so the chapter name stays readable.
My theme has a sticky header that covers the visual. What do I change?
Increase Space above the sticky visual in the Layout settings to roughly the height of your header; the visual resizes to fill the rest of the screen. Sticky positioning also needs the surrounding theme wrappers not to use overflow hidden, which holds for Dawn and most Online Store 2.0 themes.
How does it look on mobile?
Below 990px the sticky pane is removed. Each chapter shows its own visual, with its number and name, beside its text on tablets and above it on phones, so the story reads naturally with a thumb scroll and nothing depends on scroll position or hover.
More sections
Pro
Pro