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, .svg

• Recommended: Upload lightweight files for optimal performance

• You can find free loaders at sites like Gifer or create your own

To upload:

1. Click Upload image or Select from your Shopify files

2. 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