Skip to content

Animations

This guide describes the Theme settings > Animations menu options.

Apply animations to simulate movement on your store's pages for links and media items inside cascading content sections, like images. Store visitors who set their local preferences to reduce motion will automatically experience limited animations.

The previous video demonstrates how to enable animation effects.

For general guidance with adjusting a theme setting, refer to Settings overview and Shopify help: Theme settings.

Configure animations

To set how animations are displayed on your store's pages:

  1. Go to Theme settings > Animations.

    Theme setting's Animations menu.

  2. Select a setting described in the following table.

Setting nameDescription
Media > Zoom media links on hoverSelect the Zoom media links on hover checkbox to turn on/ off "zoom on hover" animations for linked media items. A linked media item is a media item that's hyperlinked to a store page or external web page. This setting is on (enabled) by default. With this setting on, when a store visitor places a cursor over a linked media item, a "grow" or "zoom" animation is applied to the media item.
Cascading content > Fade in itemsSelect the Fade in items checkbox to turn on/ off fade-in animations for media items inside cascading sections. This setting is on (enabled) by default. With this setting on, a fade-in animation effect is applied to media items. When a store visitor scrolls down a store page, the animation is displayed as the media items enter into view from the bottom of the page.
Cascading content > Enable parallax animationsSelect the Enable parallax animations checkbox to turn on/ off parallax animations for media items inside cascading sections. This setting is on (enabled) by default. With this setting on, an animation effect scrolls smaller-sized media items at a faster speed than larger items when a store visitor scrolls through a store page.
Cascading content > Parallax intensityAdjust the Parallax intensity slider to make the parallax animation effect more or less visible. The slider ranges from 0% to 100% (percent).