Animations
Theme settings > Animations controls motion across the store. Every animation turns off automatically for shoppers who ask their device for reduced motion.
How to set it up
Step 1: Choose page motion
- Go to Theme settings > Animations.
- Turn on Enable reveal animation (1) to fade sections in as they scroll into view, and Enable smooth scroll for eased page scrolling.
- Turn on Enable heading word reveal to reveal headings word by word.
Step 2: Set hover effects
- Buttons: label animation (Default, Rolling or Cascade), its direction, and a background fill on hover.
- Links: underline thickness and offset, and the label animation.
- Navigation: the label animation of header menu links.
- Chevron: the hover of round arrow buttons.
Step 3: Add a scroll to top button
- Under Scroll controls, turn on Scroll to top, and set its position, shape, size, offsets, when it shows, its animation and colors.
Settings reference
Animations
| Enable reveal animation | Turns this on or off. |
|---|---|
| Enable smooth scroll | Turns this on or off. |
| Headings | |
| Enable heading word reveal | Turns this on or off. |
| Buttons | |
| Label animation | Options: Default, Rolling, Cascade. |
| Rolling direction | Options: From top, From left, From right, From bottom. |
| Enable background fill animation | Turns this on or off. |
| Fill direction | Options: From top, From left, From right, From bottom. |
| Links | |
| Underline thickness | Slider. |
| Underline offset | Gap between link text and its underline, relative to the font size. |
| Label animation | Options: Default, Rolling, Cascade. |
| Rolling direction | Options: From top, From left, From right, From bottom. |
| Navigation | |
| Label animation | Options: Default, Rolling, Cascade. |
| Rolling direction | Options: From top, From left, From right, From bottom. |
| Chevron | |
| Hover animation | Options: Rolling, Fill background, None. |
| Direction | Options: From top, From left, From right, From bottom. |
| Scroll controls | |
| Scroll to top | Turns this on or off. |
| Show on mobile | Turns this on or off. |
| Position | Options: Left, Right. |
| Shape | Options: Circle, Rounded, Square. |
| Corner radius | Slider. |
| Size | Slider. |
| Border thickness | Slider. |
| Desktop edge offset | Distance from the side of the screen. |
| Desktop bottom offset | Distance from the bottom of the screen. |
| Mobile edge offset | Distance from the side of the screen. |
| Mobile bottom offset | Distance from the bottom of the screen. |
| Show after scrolling | Slider. |
| Show animation | Options: Fade + slide, Fade + scale, Fade, None. |
| Show shadow | Turns this on or off. |
| Background | |
| Icon color | |
| Border color | |