How to use Lottie Animations on Shopify

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.