How to use Lottie Animations on Shopify
Â
Â
Transcript of the video:Â
Search for Lottie and then select the Lottie animation section. You can see that a default animation is already set, but you'll want to add your own.
Â
You can go to lottiefiles.com and under the Discover tab, you'll see there are free animations available. You can also hire an animator to make an animation unique to your store.
Â
We're going to select this stir fry animation. Once selected you'll be shown the details of the animation. In order to add it to to your store go to the place it says use animation in and choose the option. That will open up a new tab, and right under Generate Code you'll see a url.  Copy this url and go back to the theme editor and paste it into the Lottie url field.
Â
You might find the animation too big, so you can scale down the size, you can also switch the side shows up on. There are a few animation options. You can set it to On Hover and the it will only animate while your cursor is hovering over it. You can set it to Match frame with scroll and it will animate as you scroll up or down the page. The on scroll option will start the animation on scroll, and then the animation will loop.