How To Create a Custom Preloading Screen on Shopify Store

What’s a Preloading Screen and Why It Matters

A preloading screen (or preloader) is a short visual animation that appears while your Shopify store loads in the background. Though lasting only a few seconds, it plays a key role in shaping the user's first impression.

Why does it matter? Because slow or blank-loading pages can confuse or frustrate visitors. A well-designed preloader helps improve perceived speed, elevate your store’s brand experience, and can even reduce bounce rates. It’s basically a way to hide the theme load delay while keeping visitors engaged.

Unfortunately, Shopify doesn't include built-in tools to create a custom loading screen. If you want to customize one manually, you need to edit the theme files. However, using a no-code page builder with preloader features gives merchants more flexibility and control without touching code.

In this guide, we’ll explore both the no-code approach using apps and the manual method with code, so you can choose what works best for you.

How to Add Preloader Screen to Shopify Store

Method 1: Adding Preloader Using Apps

If you're looking for a way to add a loading animation to your Shopify store without touching a line of code, using an app is the most straightforward option. Builders like EComposer include built-in preloader customization options (available in its Pro Plan). 

You can add a brand logo, loading spinner, or even a Lottie animation to the preloader. It also lets you control display duration, background, and transition styles.

This method is especially useful if you want to optimize your store’s UX with a branded experience during load.

Step-by-Step Guide: Adding a Preloader Using an App

Stage 1: Install, set up, and build your First Shopify Store Page with EComposer

EComposer is a drag-and-drop Shopify page builder app that lets you create and design high-converting custom pages without touching code.

To download EComposer, search for “EComposer” in the App Store.

• After downloading, you will be directed to the Dashboard.
• Click “Install”.

• Click “Next”.

• Select the Theme you’re using, then “Next”.

• Fill in your store’s password, if any. To manage and find your store’s passwords, click here.
• Then, Click “Save” → “Next”.

Stage 2: Build Your Page Using EComposer

Note: The Preloader Extension is accessed through the page editor so make sure you created a page in EComposer first.

• Pick The Page Type that you want to build your Shopify store on. In this case, we are choosing the “Landing & Pages” option. Then click “Select Template”.

• Next, browse and choose a readily available template in our Library or start with a Blank one.
• Click “Next”.

• Set up your General Page Information like Page Title, Handle, and choose to show/hide Header & Footer if you’re using a theme.
• Click “Start Building”

From this point, you can move on to Stage 3. If you want to build your page further using EComposer, this is how.

Stage 3: Install Preloading Effect Extension

While editing your page, you can open the Extension Popup in two ways:

• Click on the Extension icon in the top left corner.

or

• Under the Extension element tab, click "Add more".

• Search for the “Preload Effects” extension & install it.

Stage 4: Customize your Preloader

• After installing, make sure the extension is enabled

Note: After finishing installing the extension, the preloader is enabled by default.

• Choose a Preloader Style or Upload Your Own. Choose a readily available style:
  • Overlay effects: Bring your design to life with animations like Fade, Slide, and Zoom-out, creating an engaging user experience.

• • Overlay Effect Duration: Creating smooth, engaging page transition animations that enhance the user experience.

• • Overlay Background: enhance content visibility, add depth, and elevate your design aesthetics.

• • Loader Types: You can toggle between Image and CSS
    • For CSS Type, we have four built-in loading spinner styles: Circle, Dots, Continuous, and Infinity. You can also adjust their colors to your liking.

• • • For Image Type, you can choose your images for a visually engaging loader (whether it’s your logo or a playful GIF). SVGs are also supported.

• Add Image Animation: Put in some animations to your liking. We have 4 built-in animations: Default, Pulse, Rotate, and Scale.
• After customizing your preloader, click “Save” to apply.

Stage 5: Preview and Publish

After setting everything up, you can view the preloader on the live page by selecting the Three Dots (•••) > “Preview current changes”. And then…

Voila! A preloader appears!

Note: If you change Themes midway through the edit, you must reinstall the extension for it to work again.

Stage 6: Test on Desktop and Mobile

After publishing, review the effect on both desktop and mobile. Tools like Lighthouse or Shopify’s built-in speed report can help confirm performance.

Pro Tip: Use lightweight formats like SVGs or Lottie to keep loading times fast.

Method 2: Adding Preloader with Custom Code

If you want full control or to integrate a custom loading screen without using third-party apps, it’s possible to add a preloader manually by editing your theme code.

Here’s a Step-by-step guide:

• Step 1 -  Backup Your Theme: Before you start coding, make sure you duplicate your current theme to avoid irreparable errors.
• Step 2 - Edit Code: In the Shopify editor, navigate to the theme.liquid file and add the preloader HTML and CSS code, usually before the closing element. Here, we have provided some code to insert a simple blue circular preloader:

Preloader HTML - Add this right after the opening <body> tag in theme.liquid

<div id="preloader">
  <div class="spinner">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

Preloader CSS - Add this in the <head> section of theme.liquid

<style>
  #preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-in-out;
  }
  .spinner {
    position: relative;
    width: 40px;
    height: 40px;
  }
  .spinner .dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #4a90e2;
    border-radius: 50%;
    animation: spinner-animation 1.2s linear infinite;
  }
  .spinner .dot:nth-child(1) {
    animation-delay: 0s;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .spinner .dot:nth-child(2) {
    animation-delay: -0.1s;
    top: 6px;
    right: 6px;
  }
  .spinner .dot:nth-child(3) {
    animation-delay: -0.2s;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
  .spinner .dot:nth-child(4) {
    animation-delay: -0.3s;
    bottom: 6px;
    right: 6px;
  }
  .spinner .dot:nth-child(5) {
    animation-delay: -0.4s;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .spinner .dot:nth-child(6) {
    animation-delay: -0.5s;
    bottom: 6px;
    left: 6px;
  }
  .spinner .dot:nth-child(7) {
    animation-delay: -0.6s;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .spinner .dot:nth-child(8) {
    animation-delay: -0.7s;
    top: 6px;
    left: 6px;
  }
  @keyframes spinner-animation {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.2;
    }
  }
  .preloader-hidden {
    opacity: 0;
    pointer-events: none;
  }
</style>

Preloader JavaScript - Add this before the closing </body> tag

<script>
  document.addEventListener("DOMContentLoaded", function() {
    window.addEventListener("load", function() {
      const preloader = document.getElementById("preloader");
      preloader.classList.add("preloader-hidden");
      setTimeout(function() {
        preloader.style.display = "none";
      }, 500);
    });
  });
</script>

• Step 3 - Testing and Debugging: Thoroughly test the preloader on a variety of devices and browsers to check compatibility and response.

However, we found this method has many trade-offs as it:

• Requires knowledge of code and theme structure
• Has no visual editor or preloader customization options
• Can affect site layout or performance if mistakes are made
• Needs manual testing across devices
• Is less scalable if you are using multiple themes or page types

If you are a developer or advanced user, you can go by this route. But if you're looking to add a loading animation to Shopify without technical risks, a no-code builder such as EComposer is more efficient.

Best Practices for Preloader Design

A well-designed preloader can enhance your UX, but it will defeat the whole purpose if done otherwise. These best practices can save you a lot of customers if you are adding one:

• Keep it simple: Avoid long or overly complex animations. A short loading screen effect helps maintain user focus without adding frustration.
• Brand it: Use your logo or brand elements to create a Shopify preloader with a brand logo that reinforces identity during load time.
• Make it accessible: Choose readable colors, and if possible, support screen readers or add skip options for better usability.
• Don’t fake speed: A preloader should only mask brief loading delays. Otherwise, you’ll be better off fixing your page first with real speed tricks like image optimization or app cleanup.
• Test on all devices: Make sure your loading animation works smoothly across desktop and mobile.

FAQ Section

Q: Can I use custom code with EComposer if needed?
A: Yes, EComposer allows embedding custom code or assets if you want to customize your preloader further

Q: Does a preloader affect SEO or page speed?
A: A well-optimized loading screen effect won’t harm SEO. However, large files or poorly coded loaders can impact performance. Go for lightweight assets instead.

Q: Can I use a different preloader for different pages?
A: Some tools, including certain Shopify custom preloader apps, allow you to assign loaders to specific pages for a more targeted branded experience during load.

Q: How do I turn off the preloader later?
A: Most apps or manual setups include an option to turn off the loading animation or remove the code. Make sure to test your store after turning it off for proper loading behavior.