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

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 …

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.

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 cust…

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 :slightly_smiling_face:

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 …

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

this is what my code for the image is like: #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](https://www.dropbox.com/s/jhtefdakdajm7en/logo%20social%2…

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 quo…

How to add preloader screen on debut theme?

Technical Q&A

Bitbybit August 2, 2022, 3:22am 11

Hi,

Are we able to add a fadeout to this?

Thanks in advance

Topic		Replies	Views
How To Add a Preloader of my logo in shopify for free Store Design menu , design , customizations , collection-page , cart-page , shopify-themes , product-page	11	371	January 22, 2025
How can I implement a pre-loader code for all pages? Store Design design , customizations , css , shopify-themes	3	145	May 10, 2023
How can I add a preloading screen to my online store using code? Store Design design , customizations	2	74	November 22, 2022
How can I turn my logo into an animated preloader image? Shopify Discussion troubleshooting	8	389	January 20, 2025
Custom Preloader Store Design design , customizations , shopify-themes	4	125	September 6, 2024

How to add preloader screen on debut theme?

Related topics