Skip to content

Animation settings

Movement sets the pace of a store. Used lightly, it makes a page feel considered and helps shoppers notice what changed; used heavily, it competes with your products for attention. These settings live in Theme settings → Animations, reached from the gear icon at the bottom of the theme editor sidebar, and they apply across your whole store. Options that belong to a single section stay on that section.

  • Motion level is the master control for every effect in this group. Expressive, the default, runs them at full strength. Subtle keeps the same effects but softens them, which suits stores where the photography should do the talking. None turns them off for a completely still store.

Start here rather than with the individual effects. Set the level, preview your homepage and one product page, and only then adjust anything below. Whichever level you choose, visitors who have asked their device to reduce motion always get a still store, so your pages stay comfortable for every shopper.

  • Animation speed controls how quickly hovers and transitions play across the theme, with a choice of Slow, Medium, or Fast. Defaults to Medium. Slow reads as calm and deliberate and suits large imagery and higher price points. Fast feels brisk and responsive, which works well for a larger catalog where people click through quickly. Judge it by hovering a button and opening your menu.
  • Reveal distance sets how far an element travels as it animates into view on scroll. It runs from 0 to 64px and defaults to 20px. Around 10 to 20px reads as a gentle settle. Larger values feel more theatrical and need plenty of space around them to look intentional. Set it to 0 and elements fade in without moving at all.
  • Enable page transitions cross-fades from one page to the next as visitors browse, in place of the usual blank moment between loads. On by default. Browsers that do not support it fall back to a normal page load, so it is comfortable to leave on.
  • Animate product images between pages grows a product image out of its card and into the product page when someone opens it. On by default, and shown only while page transitions are enabled. This is the most noticeable effect in the group, and it lands best when the first image on the product page is the same shot used on the card. Check it by opening a product from a collection page.
  • Reveal sections on scroll fades and lifts each section into view as visitors reach it. On by default. It gives a long homepage a sense of rhythm, so one section is read at a time rather than all at once.
  • Reveal images on scroll eases images in as they arrive on screen. On by default. Turn it off if a page is heavily illustrated and you would rather everything feel present the moment it appears.
  • Reveal products on scroll brings product cards up one after another as a grid comes into view, and again after a shopper changes a filter. On by default. That second part is worth keeping: the small stagger quietly confirms that the filter did something. Check it on a collection page with filters applied.