For the collection page of shopify store, I'm altering it with a custom script. The issue that i'm facing is first it is showing the default collection page of shopify, then it my script overwrite the shopify's page and show my custom collection page. Is there a way, instead of showing the default collection page of shopify I can get atleast a loader(as in loader icon) because the UI is not looking good at all. How can I approach this problem? Any suggestion will be appreciated.
Jese Leos
August 19, 2024
Verified user
You can add loader to Shopify page like this: First, put loder HTML in page: <div id="loader" style="display: none;"> <!-- /Loader icon --> </div> Use JavaScript to show loader when page start load: document.getElementById('loader').style.display = 'block' Next, hide default content with CSS: #collection-content { display: none; } When script load finish, hide loader and show content: window.addEventListener('load', function() { document.getElementById('loader').style.display = 'none' document.getElementById('collection-content').style.display = 'block' }) This way page look beter, no bad UI.