Preloader Settings
The preloader displays a visual loading animation before your website fully loads. It enhances the user experience by offering visual feedback during loading times and helps reduce bounce rates, especially on slower networks or visually complex storefronts.
You can choose from a range of prebuilt animations or upload a custom image or GIF for a branded experience.
Enable Preloader
Toggle this setting ON to enable the preloader on your storefront. Once active, the preloader will appear whenever the website is loading, before your homepage or any other page fully renders.
Preloader Style (Choose Animation)
You can select from multiple animation styles or upload a custom image/GIF.
Available Prebuilt Animations:
Spinning Ring Loader – A clean and simple animated ring spinner.
Ripple Effect – Pulsing rings creating a ripple-like motion.
Animated Dots – Three animated dots bouncing or fading in sequence.
Flickering Rectangles – A subtle flicker of rectangle shapes.
Folding Square – A folding cube animation with modern flair.
Custom Image or GIF – Upload your own animation (e.g., a branded loader or GIF).
More Loaders – The theme includes over 10+ modern loading animations to match your aesthetic.
If you select Custom Image or GIF, your uploaded file will override the selected animation.
Upload Custom Preloader
You can use your own logo or animated graphic as the loader.
Supported formats:
.gif,.png,.svgRecommended: Upload lightweight files for optimal performance
You can find free loaders at sites like Gifer or create your own
To upload:
Click Upload image or Select from your Shopify files
Your image will automatically be shown as the preloader
Customize Preloader Appearance
Preloader Size (px)
Adjust the size of the animation or custom image (in pixels).
Example: 110
Preloader Display Duration (seconds)
Controls how long the preloader is shown before the site loads.
Example: 3 seconds
Note: If your site loads faster than the set duration, the preloader will still be shown until the timer ends. Use a shorter value for a snappier experience.
Tips for Use
Keep the size between 80–150px for balance across devices
Use looping .GIFs or vector SVGs for smooth animations
Test your custom loader to ensure it doesn’t delay the perceived load time
Final Notes
The preloader displays once per page load and disappears after the content is fully rendered or after the set duration ends
It is fully responsive and works across desktop and mobile
When combined with the Website Intro Animation, the preloader can help create a seamless, branded first impression
Last updated