Appearance
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:
Go to Theme settings > Animations.
Select a setting described in the following table.
Setting name | Description |
---|---|
Media > Zoom media links on hover | Select 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 items | Select 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 animations | Select 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 intensity | Adjust the Parallax intensity slider to make the parallax animation effect more or less visible. The slider ranges from 0% to 100% (percent). |