The Animations tab adds motion to your store: sections that animate in as shoppers scroll, and images that zoom when the mouse is over them.
Where to find it
Open the builder, click the gear icon, and open the Animations tab. The section is called General animations.
Scroll reveal
Scroll reveal animates sections as they enter the screen. Each section plays its animation once per page visit. The options:
- None: no animation. Sections are simply there.
- Fade: the content fades in.
- Slide up (the default): the content moves up a little while it fades in.
- Slide in: the content moves in from the side while it fades in.
- Zoom: the content grows slightly into place.
The section background appears right away and only the content moves, so the page never shows empty gaps.
Which parts animate
- The header and the announcement bar never animate. They are on screen as soon as the page opens.
- In product grids, collection grids, reviews, and the FAQ, each card or item animates on its own instead of the whole section, one after the other. In a carousel layout the whole section animates as one.
- A waves section keeps the fade but does not slide, so the wave stays joined to the section below it.
Which one to choose
Slide up suits most stores. Fade is the softest. Zoom and Slide in draw more attention, so they fit playful or bold designs better than calm ones.
Images zoom effect
Turn on Images zoom effect to make images zoom in slightly when the mouse is over them. It works on product cards, collection cards, product images on the product page, and review images. It reacts to the mouse, so shoppers on phones usually do not see it.
Common tasks
- Make my store feel calmer: set Scroll reveal to Fade, or None.
- Turn off all motion: set Scroll reveal to None and turn off Images zoom effect.
- Make product photos feel interactive: turn on Images zoom effect.
Troubleshooting
- I do not see the animation in the builder. Scroll reveal is turned off inside the builder so you can edit without waiting. Publish and open your live store to see it.
- Some visitors never see animations. When a visitor has asked their device to reduce motion, the store shows every section in place with no animation. This is on purpose, for comfort and accessibility.
- The zoom does not work. Check that you are on a computer with a mouse, and that the image is one of the types listed above.
Good to know
Animation settings belong to the market you are editing and apply to all its pages. Changes go live when you click Publish. If you change your mind, undo the change in the builder. See Shortcuts, undo and redo.