The Scroll film pins a film to the screen while the visitor scrolls. Halfway down the section, the film is halfway through; at the bottom, it stands on its last frame. Your words appear beside the shots they belong to, and the offer arrives with the final frame.
Prepare the film
| Recommendation | |
|---|---|
| Size | 1920 × 1080 px MP4 |
| Length | 6 to 12 seconds. Longer films need a longer scroll |
| Backdrop | Plain, without busy edges: a studio sweep, a wall, the sky |
| Story | One clear change from start to end: ingredients to bottle, closed to open, bare to finished |
| Dark mode | The same shot on a dark backdrop, same length and framing |
Set it up
Add the Scroll film section and upload your film in Film. Add the dark version in Dark mode video.
Add an Opening frame (the film's first frame, shown while it loads) and a Closing frame (the last frame, shown to visitors who prefer less motion), with their dark mode versions.
Set Backdrop to the color at the edges of your film, and Backdrop in dark mode to the dark film's edge color. The section takes on that color, so the film has no visible edge.
Add Moment blocks. For each, set Appears at and Leaves at (the share of the film, 0 to 100 %), a Position and the words.
Add the Finale block: the eyebrow, heading and text, a Product (its name and price appear) and a Button label.
Set Scroll length: 400 % means four screens of scrolling for the whole film.
For the smoothest scroll in both directions
Shopify stores videos for fast playback, with a keyframe every few seconds. Scrolling forward is always smooth; scrolling back can step. For the smoothest result both ways, encode the film with a keyframe every 6 frames, host it, and paste its address in Film link (optional) (and Dark mode film link). The link is used instead of the uploaded film.
On phones
Film on phones: Whole film shows the full frame in a band across the middle, with the words below it. Fill the screen fills the phone; use Focus on phones to keep the subject in view.
The film loads only when the visitor nears the section, and nothing runs off screen. Visitors who prefer reduced motion see the closing frame and every moment as a simple list, and a Skip the film link lets keyboard users jump past it.
Further reading on the iVishwa blog: Video on Shopify without a slow store
Was this guide helpful?
Still need help?Write to us with your shop's address and a screenshot. We reply within two business days, Monday to Friday, usually sooner.
Contact support