How can I centre a Lottie Animation in my online store?

Technical Q&A
1

Hi,

I have added a Lottie animation to a plain custom liquid section in dawn theme and the animation appears on the left side of the section. How do I get the animation to the centre in the section?

Thanks

shop url; SNEAKER INBOX

2

Hi @KotteDR Hope your Doing Well.

Shopify doesn’t have any built-in section for Lottie animations. However, you can add one using a custom code section in your store.

Here’s what you need to do:

  • Go to this website: LottieFiles Web Player.
  • Paste the Lottie JSON file URL there, and it will generate the HTML code for you.
  • You can then add this HTML code to the custom code section of your Shopify store, and it will work.

If this solution helps you, kindly like this reply and mark it as a solution. If you need an expert Shopify developer for customization and development, feel free to contact me via email or WhatsApp.

3

Hi

I have already added Lottie animation code via custom liquid section, but the animation is not centred. looking to get some piece of code to centre the animation.

thanks

4

Just give the element a centering style using the margin property: margin: 0 auto; https://www.w3.org/Style/Examples/007/center.en.html

1 Like
5

Hi @KotteDR

try adding this CSS

dotlottie-player {
    width: 100% !important;
    height: 100% !important;
    max-width: 20% !important;
    margin: auto;
}

Kindly adjust the Max-width according to your need let me know if this works

If this solution helps you, kindly like this reply and mark it as a solution. If you need an expert Shopify developer for customization and development, feel free to contact me via email or WhatsApp.

6

Amazing, Thank you so much

1 Like