how to add preloader screen on debut theme?

[dimgar]

I would like to add the pre loader animation to my web page how can i add it?

[Julie]

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!

[dimgar]

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.

[Julie]

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. 

[TwoColors]

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 🙂

[PierceKingston]

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.

<div id="preloader">

</div>


<script type="text/javascript">

(


function()

{


var preload = document.getElementById("preloader");

var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

var loading = 0;

var id = setInterval(frame, 60);

function frame()

{

if(loading == 70)

{

clearInterval(id);

}

else

{

loading = loading + 1;

if(! isMobile)

{

if(loading == 60)

{

preload.style.opacity = "0";

preload.style.display = "none";

}

}


else if(isMobile)

{

if(loading == 70)

{

preload.style.opacity = "0";

preload.style.display = "none";

}

}

}

}


})();

</script>


<style>


#preloader {

position: fixed;

width: 100%;

height: 100%;

z-index: 999;

overflow: visible;

background: #FFFFFF url('"animation url here"') no-repeat center center;

}


</style>

[trackspikes]

this doesn't seem to work for me, can you help?

[trackspikes]

this is what my code for the image is like:

<div id="preloader"> </div> <script type="text/javascript"> ( function() { var preload = document.getElementById("preloader"); var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); var loading = 0; var id = setInterval(frame, 60); function frame() { if(loading == 70) { clearInterval(id); } else { loading = loading + 1; if(! isMobile) { if(loading == 60) { preload.style.opacity = "0"; preload.style.display = "none"; } } else if(isMobile) { if(loading == 70) { preload.style.opacity = "0"; preload.style.display = "none"; } } } } })(); </script> <style> #preloader { position: fixed; width: 100%; height: 100%; z-index: 999; overflow: visible; background: #FFFFFF url('"https://www.dropbox.com/s/jhtefdakdajm7en/logo%20social%20media-01.png?dl=0

"') no-repeat center center; } </style>

[PierceKingston]

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. 

[adnan11]

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

[CharBar93]

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:

<div id="preloader">

</div>

<script type="text/javascript">

(

function()

{

var preload = document.getElementById("preloader");

var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

var loading = 0;

var id = setInterval(frame, 60);

function frame()

{

if(loading == 70)

{

clearInterval(id);

}

else

{

loading = loading + 1;

if(! isMobile)

{

if(loading == 60)

{

preload.style.opacity = "0";

preload.style.display = "none";

}

}

else if(isMobile)

{

if(loading == 70)

{

preload.style.opacity = "0";

preload.style.display = "none";

}

}

}

}

})();

</script>

<style>

#preloader {

position: fixed;

width: 100%;

height: 100%;

z-index: 999;

overflow: visible;

background: #FFFFFF url("https://drive.google.com/drive/folders/1S61w-GQ2wfX3yZaV8R7FESO67ed0hNGm") no-repeat center center;

}

</style>

[Bitbybit]

Hi, 

Are we able to add a fadeout to this? 

Thanks in advance

[StudioSoprano]

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!! 

[awosikaanthony]

Where did you paste the code exactly? I am not sure where to paste it.

[awosikaanthony]

Where in theme.liquid did you paste it?