Motion
Smooth scrolling, animation length, hover dimming and how search opens. Shoppers who ask their device for reduced motion see no animation.
Online Store › Themes › Customize › Theme settings › Motion
Scrolling
Enable smooth scrolling
Eases the mouse wheel on desktop. Phones, the theme editor and visitors who ask for reduced motion always scroll natively. Scroll effects work either way.
Scroll feel
Grip: each turn of the wheel goes a little further than usual and stops as soon as the wheel does, so the page keeps up with you. Elastic: each turn lands quickly and settles softly. Brisk: Elastic, a little quicker. Glide: the page keeps drifting after the wheel stops, for a slower, floating feel.
Show a thin scrollbar in panels
With a mouse, from 768px: sheets, the navigation drawer and filter panels.
Animation length
How long the theme's transitions take. 100% is as designed. Visitors who ask for reduced motion see no animation.
Hover
Row hover line
What the hairline under a list row does when the pointer is over it, in navigation, option pickers, sheets and collapsibles.
Move row words in on hover
A list row's words move 8px to the right while the pointer is over it. Color swatches stay still.
Card name line
The line under a product or collection card's name while the pointer is over the card.
Dim the others on hover: pointing at one row or link dims its neighbours, per kind of list.
Dim in navigation
The header, its navigation drawer and mega menu, the footer menus and the collection links.
Dim in product information
On the product page and in Quick buy.
Dim in questions
Dim in other lists
Tags, page numbers, the bag's line actions, service rows, social media links and the rest.
Panels
Search opens
Search fades in over the page, the fade sweeping from this edge or corner, and back to it as it closes. A corner sweeps across to the opposite one.