Animations
Two kinds of motion live here. Both start off, and each is switched on its own — turning one on says nothing about the other.
A linked image grows a little under the cursor.
Blocks arrive with an entrance effect as the page is scrolled.
Image zoom on hover
An image that links somewhere scales up a little while the cursor rests on it, hinting that it can be clicked. It applies anywhere an image acts as a link — product cards, collection cards, blog cards, mega-menu banners, and so on.
Enable image zoom on hover turns the effect on and off. It applies to the whole storefront — there is no per-block control.
Block animations
A block fades, slides, or grows into place the first time it scrolls into view, and stays put from then on. Each block picks its own effect and timing through the Animation setting it carries — headings, text, images, buttons, and so on.
Enable block animations turns the effect on and off. It applies to the whole storefront, but a block still plays nothing until its own Animation → Type is set.
Type
Set on the block itself, under Animation → Type.
None
No animation; the block appears immediately.
Fade
Fades in from transparent.
Scale
Grows from half size while fading in.
Slide from left
Slides in from the left while fading in.
Slide from right
Slides in from the right while fading in.
Slide from bottom
Rises from below while fading in.
Rotate words
(Heading only) Cycles through the heading's words in place, one at a time.
Delay
Milliseconds to wait before the block starts animating. Set increasing delays on successive blocks to stagger their entrances.
Blocks that can animate
These blocks expose an Animation setting:
The built-in headings that sections and blocks bring with them carry the same Animation group — the heading of Recommended products, Recently viewed and its page version, Related posts, the Collection list page, the Video reviews block, and the recommendation row in the Cart drawer.
Last updated