how to add preloader screen on debut theme?

dimgar
Excursionist
19 1 6

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

0 Likes
Julie
Shopify Staff
Shopify Staff
1006 89 235

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!

Julie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
dimgar
Excursionist
19 1 6

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
Shopify Staff
Shopify Staff
1006 89 235

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. 

Julie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes

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

Maciej Tokarczyk
Shopify Expert
PierceKingston
New Member
2 0 3

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
New Member
3 0 0

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

0 Likes
trackspikes
New Member
3 0 0

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>

 

 
0 Likes
PierceKingston
New Member
2 0 3

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. 

0 Likes