Dear shopify,
I want to have a preloading image when open the pages in the website.
MY Theme is dawn theme.
Kindly share code on how to add the preload
Thank you
To add a preloader image when opening pages on your Dawn theme Shopify website, you can follow these steps:
- Create a new file named preloader.liquid in your theme’s sections folder. Add the following code to the file:
- Add your preloader image file (e.g., preloader.gif) to your theme’s assets folder.
- Open your theme’s theme.liquid file and include the preloader.liquid section just after the opening tag:
{% section 'preloader' %}
...
- Save the changes.
Here’s how it works:
- The preloader.liquid section contains the HTML structure for the preloader, which consists of an image wrapped in a element.
- The CSS styles position the preloader to cover the entire screen and center the preloader image vertically and horizontally.
- The JavaScript code listens for the load event of the window object. Once the page is fully loaded, it sets the display property of the preloader to none, effectively hiding it.
By including the preloader.liquid section in your theme.liquid file, the preloader will be displayed on all pages of your website until the page is fully loaded.
Make sure to replace ‘preloader.gif’ with the actual filename of your preloader image. With these steps, you should have a preloader image displayed when opening pages on your Dawn theme Shopify website.
I hope this helps.
Thank you very much for your response. You explained very well.
This the code which i added to liquid section
Now it shows before the page load and every time logo is showing.
However sometimes i feel logo is appearing for longer because shopify is loading very fast.
Can we hide the logo faster once is content partially rendered on the screen instead of waiting for whole page or window to be displayed ?
kindly advise.
Thank you
Yes, you can hide the preloader once the main content is partially rendered on the screen instead of waiting for the entire page to load. Here’s how you can modify the code to achieve that:
Here are the changes made:
-
Changed the position property of the .preloader class to fixed instead of relative. This ensures that the preloader covers the entire viewport regardless of the page’s scroll position.
-
Changed the event listener from window.addEventListener(‘load’, …) to document.addEventListener(‘DOMContentLoaded’, …). The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. This means the preloader will be hidden as soon as the main content is ready, even if some resources are still loading.
With these modifications, the preloader will be displayed until the main content is loaded and parsed, and then it will be hidden, allowing the user to see the partially rendered content while the remaining resources continue to load in the background.
Keep in mind that the exact timing of when the preloader is hidden may vary depending on the complexity and size of your page’s content. If you have a lot of content that needs to be loaded and parsed, there might still be a slight delay before the preloader is hidden.
However, this approach should generally provide a faster perceived loading experience compared to waiting for the entire page to load.
Thanks a lot , your solution worked very well.
can i show only once time when site load and show only home page not all pages when i go to another page loader showing but i dont want loader on other pages
make a preloader.liquid file and add the below code, replace the image file path and
then in theme.liquid add bellow lines before closing body tag.
{% section ‘preloader’ %}
how i add preloader image? i fellow All step but i confused on that point
- Add your preloader image file (e.g., preloader.gif) to your theme’s assets folder.
@Xipirons @usershop2024 @amjadali01 @ehtisham13 @LeoCameron . Hi thanks is that possible to provide any animation on page start and in end.