As customers scroll, sections can move gently into place: a heading fades up, a photo is uncovered, a row of products appears one after another. You choose the effect for each section, and set the speed once for the whole store.
Turn animations on or off
In the theme editor, open Theme settings > Animations.
- Enable scroll animations switches every animation in the store on or off.
- Animation speed: Slow, Normal or Fast.
- Animation distance: how far content travels as it fades or slides in, Small or Medium.
Choose an effect for a section
Select a section and choose its Animation. Each section lists only the effects that suit it.
- Fade up (the default): content fades in while rising a little.
- Fade in: content fades in without moving.
- Slide from left and Slide from right: content slides in from the side.
- Image reveal: photos are uncovered from the bottom up. On sections with large images.
- Stagger: the items of a grid or row appear one after another. On product, logo, photo and quote sections.
- Soft parallax on images: photos drift a little slower than the page as customers scroll. On image with text and the editorial grid. Browsers that can't do this smoothly show a still photo.
- None: the section is simply there.
The setting is on image with text, rich text, testimonials, featured collection, collection tabs, the editorial grid, shop the look, material notes, newsletter, before / after, brand list, social gallery, countdown, contact info and map.
What never moves
- The top of the page. The first section of a page, and anything on screen when the page opens, always shows at once. Your hero image is never hidden or delayed, so the page feels as fast as it is. For the same reason, image banners, slideshows and the cover hero have no animation setting.
- Customers who prefer less motion. When a customer has asked their device to reduce motion, nothing moves; everything is simply there.
- Content. Animations only change how content arrives. Nothing is hidden from screen readers or keyboards, and if a script fails to load, everything shows within two seconds.
In the theme editor
Animations play in the editor too, so you can see them as you scroll the preview. A section you add, change, select or move shows at once, so you never edit something you can't see.
Tips
- Use one or two effects per page. A page where every section moves differently feels busy.
- Fast and Medium suit a bold store; Slow and Small suit a calm one. The presets show both: Broadsheet slides and staggers quickly, Almanac fades in slowly.