I would like to add the pre loader animation to my web page how can i add it?
1 Like
Hey, @dimgar !
Julie here from Shopify Support.
Adding a pre-loading animation to your website is a great idea. While you can definitely look into hiring a Shopify Expert to build a custom solution for you, it does look like there are a couple of apps specifically designed for this.
Both Loadify and Preloader are highly rated apps that give you the ability to add a loading image to your store. With these apps, you can upload your own image or GIF file, or use pre-selected animations. These apps are also user-friendly and donât require any custom code to install. I recommend checking each of them out to see which one suits your needs the best. If you have any questions about either of these apps, or if you need any assistance, you can find the developersâ contact information directly under the Support section of their app pages.
Are you noticing that your website is slow to load? If so, I recommend checking out our blog post, âHow Lazy Loading can Optimize Your Shopify Theme Imagesâ. This post includes some great tips on how you can increase your site speed by having certain images load only when they are needed by the customer. For example, you can use lazy loading to render product images as customers scroll through the products on your website. If improving the speed in which your website loads is something youâre focusing on, then I think youâll find this blog post quite useful.
I hope this helps. Feel free to respond here and let me know what you think about those apps!
thnx for reply.
paying a front end developer or paying an app isnt support (of how to do it or solve it) its an advice.
11 Likes
Youâre welcome.
As opposed to our support channels, our Community Forums are a resource for merchants to ask for advice from other merchants, Shopify Partners, and Shopify staff. If you are seeking support, you are welcome to reach out to our team at any time.
That being said, this would be a customization that would fall outside our scope of theme support. I understand that this may not be the answer youâre looking for, but I hope that one of the above suggestions work out for you.
If you have any further questions, please donât hesitate to reach out again.
In case you want more options for Preloader, or your theme doesnât have it built in, there is an app called Preloader https://apps.shopify.com/preloader that letâs you set up custom preloading screen for your store 
2 Likes
Hey,
I know how bothersome it is to ask for help and get bombarded with apps you could pay for.
Hereâs how I did my preloader. just throw it in âtheme.liquidâ in the âLayoutsâ tab. You can change the timing of the screen by editing the interval numbers.
To add your picture or animation, it would be best to upload it to a third party photo/video hosting and copy and paste the image link from there where it says âanimation URL hereâ
I hope this helps, let me know if you have any questions on it.
8 Likes
this doesnât seem to work for me, can you help?
this is what my code for the image is like:
"') no-repeat center center; }
I would try putting the image on a public source site so they host and store the image. Something like imgur or another website provider give links that usually work.
Hi @trackspikes there is a small error in your code , towards the URL part
Change âŚ
url('"https://www.dropbox.com/s/jhtefdakdajm7en/logo%20social%20media-01.png?dl=0
"')âŚ
to
url("https://www.dropbox.com/s/jhtefdakdajm7en/logo%20social%20media-01.png?dl=0
")
There was an extra( ââ ) single quotes which shouldnât be there and since you are using shopify add your image or GIF to the âFilesâ section in settings and then copy the url from there and past it on your code.
@PierceKingston if possible please remove the single quotes from the format you have provided . It works for me when its removed . Btw great work @PierceKingston , Much appreciate your work.
Thanks
1 Like
Hi,
Are we able to add a fadeout to this?
Thanks in advance
Thank you SO MUCH for this! Iâve been on You Tube for hours and was close, but just couldnât get it to work and this did it in a snap. Really appreciate you sharing this!!
Where did you paste the code exactly? I am not sure where to paste it.
Where in theme.liquid did you paste it?
1 Like
Hello
I tried this to no avail on my Monaco theme site which you can see here with password: transfer https://londonfermentary.myshopify.com/
I tried with a .png, .svg. mp4 and .gif to no avail. I checked the âsharingâ settings of each file in G-Drive and they were set to public view. Can anyone help me please?
Here is my code: