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

Store Design
, ,
1

Hello, I’m working on my store and want to add a Lottie Animation. When added it’s not centered, sadly I don’t know much about code. I’ve only added this in a plain custom liquid section, obviously it won’t center, but the problem is that I don’t know/cou a fix :pensive_face: . Hopefully someone can help me out with centering it (from as far as I know it does already properly center on mobile):

Kinds regards,

T.

2

@ThijsV88

Try to ad this code to a css file

lottie-player {
display: block;
margin : 0 auto;
}

Try it and let me know

1 Like
3

Hey thanks for the quick response! I won’t lie, I’m not too sure if I’m doing it right, but I think it doesn’t work. I’ve currently added your code to the bottom and top of a css file with the Lottie Animation. When doing that it will simply show up as plain text. Could definitely be the case that I’m doing something silly though…

4

@ThijsV88

Could you share your store URL? then I can review it

5

Sure, it’s: https://theanimeplushies.com/

6

@ThijsV88

Try this code
1 Like
7

Sadly this still doesn’t seem to work for me

8

@ThijsV88

I checked and it seems you does not use the new code yet.

9

@ThijsV88

You can add this code to Edit code > assets > base.css file at the end

lottie-player {
display: block;
margin : 0 auto;
}
1 Like
10

This seems to do the job, thanks a bunch!

11

@ThijsV88 you are welcome

1 Like
12

Hello mate,
I’m looking to do something similar. Does this way still work in 2023? I use the dawn theme and my site is: https://c04baf-2.myshopify.com/ (Diversusoficial is the code)

I want to do something like this: https://gemoo.com/tools/upload-video/share/567241571823239168?codeId=P5pqQ30lKl97K&card=567241566878154752&origin=videolinkgenerator