Custom Preloader

Store Design
, ,
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!