Animations

This guide describes the Theme settings > Animations menu options.

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

The previous image shows a store's Default collection in Theme editor. In the upper right, part of Theme editor's Theme settings > Animations menu is displayed. The menu's Zoom media on hover option is set to on (enabled). In the lower right, when the cursor is placed over a product image tile (media item), a "grow" or "zoom in" animation is applied to the media item.

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

Set up animations

To set up animations:

1. In Theme editor, go to Theme settings > Animations.

2. Select a setting described in the following table.

Setting name	Description
Fade in media on load	Use the Fade in media on load options to turn on/off "fade-in" animations for media items inside sections. With this setting enabled, 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.
Zoom media on hover	Use the Zoom media on hover options to turn on/off "zoom on hover" animations for media items inside sections. With this setting enabled, when a store visitor places a cursor over a media item, a "grow" or "zoom in" animation is applied to the media item.
Zoom level	Adjust the Zoom level slider between 101 % and 110 % (percent) to specify a zoom level for "zoom on hover" animations. To use this option, enabled the Zoom media on hover option.