How To Add Preloader and Transitions in Shopify [Free]

Hello Shopify store owners! In today’s tutorial, we’ll walk you through adding a stylish preloader and implementing lazy load functionality to your Shopify store. The best part? You won’t need any coding knowledge to do it! This guide is perfect for those looking to improve their store’s SEO, enhance user experience, and add some cool visual effects—all with a simple app called Loadify. Let’s dive in!

Step 1: Installing the Loadify App

First, head over to the Shopify App Store and search for Loadify. Once you’ve found it, click on the install button. After installation, open the app, and you’ll be greeted with a user-friendly interface where you can customize your preloader and enable lazy load functionality.

Step 2: Setting Up Your Preloader

Upon opening Loadify, you’ll see options to choose and customize preloaders. Here’s how to do it:

1. Select a Preloader: Loadify offers a variety of pre-designed preloaders. You can preview each one by selecting it and seeing how it looks in the live preview section. If you find one you like, click on it to customize it further.
2. Customize the Preloader: Change the colors to match your store’s branding. If you want to use your logo or image as the preloader, simply upload it in the custom image section. Adjust the animation settings, like zoom in/out or spin, to add more flair.
3. Save and Preview: Once satisfied with your preloader, click on save. Open your store in a new tab and hit refresh to see your preloader.

Step 3: Enabling Lazy Load for Better SEO

Lazy load ensures that images on your store only load when they come into view, speeding up your site and improving your SEO. Here’s how to enable it:

1. In the Loadify app, navigate to the Optimization Settings section.
2. Enable Lazy Load: Toggle the lazy load option on. This will ensure that images load as users scroll, rather than all at once, reducing initial load times and enhancing the user experience.
3. Link Predict: You can also enable link predict, which preloads assets of a page when a user hovers over a link, further speeding up navigation on your site.

Step 4: Fine-Tuning Preloader Settings

Loadify allows you to refine how and where your preloader appears:

1. Auto-Hide and Timing: You can set the preloader to automatically hide once the page is fully loaded, or manually set it to hide after a specific time, like 1 or 2 seconds.
2. Per Page Preloaders: If you want to display the preloader only on certain pages, you can select which pages it appears on, allowing you to customize the experience even further.
3. Session-Based Preloaders: Choose whether the preloader should appear only once per session or on every page refresh.

Step 5: Adding Page Transitions

Loadify also allows you to add smooth page transitions to enhance the browsing experience:

1. Select a Transition Style: Choose from various transition effects like slide, teardrop, or old TV. Preview how these will look when moving from one page to another.
2. Customize Transition Direction: Adjust the transition direction, from bottom to top or right to left, to match your store’s design.
3. Add Sound Effects: For a more interactive experience, you can even add sound effects to your page transitions.

Step 6: Publish and Enjoy

After setting everything up, hit save and refresh your store to see your new preloader and lazy load functionality in action. These features make your store look more professional and improve load times and user experience, which is great for SEO.

Conclusion
That’s it! You’ve successfully added a stylish preloader and lazy load functionality to your Shopify store without writing a single line of code. Loadify makes it easy to enhance your store’s performance and visual appeal. If you found this guide helpful, consider subscribing to our channel for more Shopify tips and tricks.