Custom Preloader

Store Design
, ,

Topic summary

Whether to add a custom preloader to a Shopify store and how to implement it.

  • Guidance: A preloader can improve perceived loading, especially on visually heavy pages. However, prioritize site performance and fast load times to ensure good UX.

  • Implementation (core steps provided in code):
    • Add the preloader HTML in theme.liquid (Layout), placed just before the closing tag.
    • Use JavaScript to listen for the window “load” event and then add a “hidden” class to the preloader to remove it once the page finishes loading.
    • Style with CSS: a fixed, full-screen overlay (#preloader) with high z-index, centered content (e.g., logo), and a “hidden” class that sets display to none.

  • Resources: A video tutorial link was shared for a step-by-step walkthrough.

  • Outcome: The original poster confirmed both the code-based approach and the video-guided approach worked. The issue appears resolved with no remaining open questions.

  • Note: The shared code and video are central to applying the solution.

Summarized with AI on December 20. AI used: gpt-5.
1

I am considering adding a custom preloader to my store. However, I would appreciate suggestions on whether it’s a good practice for a store, and if so, how I can implement it. Thanks!

2

Hey @Hesepim
In the theme.liquid file (found under Layout), add the following code right before the closing tag


  

    
    
  


window.addEventListener('load', function() {
  document.getElementById('preloader').classList.add('hidden');
});

#preloader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff; /* Change this color to match your theme */
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader img {
  width: 100px; /* Adjust the size of your logo */
}

.hidden {
  display: none;
}

If your store’s load time is optimized, adding a preloader can be a nice touch, but always prioritize performance to ensure a good user experience.

1 Like
3

Hi @Hesepim , yes, adding a preloader can improve the perceived loading experience, especially for stores with visually complex elements or if some pages take time to load. To add a custom preloader, kindly check out the below video

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

1 Like
4

@anupam1607 , it is working, thank you so much!

1 Like
5

@topnewyork , your solution is also working for me. Thanks for always giving me the best videos, really appreciate your help always!