Animations
Animations controls motion on the storefront: scroll animation, the hover effect on cards, and the loading effect shown while a page loads.
How to find it
In the Theme Editor, open Theme settings, then select Animations.
Settings
View the settings guide .
| Setting | Options | Description |
|---|---|---|
| Scroll animation | • Disable | Controls whether elements animate into view as shoppers scroll. Disable turns scroll animation off, Desktop only skips it on screens narrower than 768px, and All screens animates everywhere. |
| Hover effect | • Zoom | Affects hover cards such as product, banner, collection, and blog cards. |
Page loading effect
| Setting | Options | Description |
|---|---|---|
| Enable effect | Shows a full-screen loading screen while a page loads. When off, a thin progress bar is used instead. | |
| Background color | Background color of the full-screen loading screen. Only available when Enable effect is on. | |
| Text color | Color of the spinning ring on the loading screen. Only available when Enable effect is on. |
Loading icon
| Setting | Options | Description |
|---|---|---|
| Image | 100px x 100px recommended |
Scroll animation sets which screens use scroll animation. Desktop only limits it to desktop screens.
Hover effect sets the hover style for hover cards, such as product, banner, collection, and blog cards. Choose Zoom or Fade in.
When Enable effect is on, the page loading effect uses the background color, text color, and loading icon. The loading icon is recommended at 100 px by 100 px.
Notes
Background color, Text color, and Loading icon are hidden while Enable effect is off.
Desktop only treats any window 768 px wide or wider as desktop.
No comments yet