How can I position Lottie animation and add text on my website?

Store Design
, , ,
1

Hi,
Currently I’d love to add a lottie file to my website, with text next to it.
There is the “Image with text” function that works with a gif. And it looks exactly as i want it with the lottie file. However the loading speed of a gif is too long. So I need a way to make it look similar but with a lottie file.

Url: www.royalpeace.com
Pass: Vitamins1970’s

The lottie/gif is at the bottom. You’ll see the gif loading after 30~seconds. And the lottie instandly loading but with the wrong positioning/no text.

Here the lottie code:

2

helllo there

It seems that you are attempting to add a Lottie file to your website alongside some accompanying text. While there is an “Image with text” function that works with a GIF, the loading speed of a GIF may be too slow for your purposes. You would like to achieve a similar look with a Lottie file, but the positioning is incorrect and there is no text currently displayed.

To achieve the desired effect, you may need to adjust the positioning and styling of the Lottie file. One option is to use CSS to position the Lottie file in the same way as the GIF. Additionally, you can add the accompanying text next to the Lottie file using HTML and CSS.

Here is an example of how you can modify the code you provided to achieve the desired effect:


  

    
  

  
    ## Accompanying text
    

This is the text that will appear next to the Lottie file.

This code creates a container that uses flexbox to align the Lottie file and text horizontally. The Lottie file is positioned to the left with a width and height of 300 pixels, and the accompanying text is positioned to the right.

3

Thanks for your solution, it actually works great, however, there is some minor issues.

  1. Can the text be made as a metafield (Translation purposes)
  2. I need multiple rows for the text is this possible? (Preferably I’d be able to change the white spacing between lines.)

It would actually also be better to have the lottie inserted with the .lottie file instead of the link. Because when using the link you’ll have to get a subscription to keep the link working. And with the file downloaded its free. Is this possible?

I really appreciate your help!!