Creating a Custom Preloader Animation for Your Shopify Store

Want your store to look professional and keep customers engaged while your pages load? A preloader animation is a simple and effective solution. This tutorial shows you how to add a custom preloader to your Shopify theme without using any apps.

📌 Step 1 — Create the Preloader HTML

1. Go to Online Store → Themes → Edit Code

2. Open layout/theme.liquid

3. Add the following code just inside the tag at the very top:

---

📌 Step 2 — Add Preloader CSS

Open your theme CSS file:

assets/theme.css or assets/base.css

Paste the following CSS:

/* Preloader Styles */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loader {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #2a88d8;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

This will create a simple spinning circle preloader in the center of the screen.

---

📌 Step 3 — Add JavaScript to Hide the Preloader

Still in theme.liquid, add this just before the closing tag:

This ensures the preloader disappears once all content (images, scripts, etc.) is fully loaded.

---

📌 Step 4 — Optional: Customize the Preloader

• Change the spinner color: adjust border-top: 6px solid #2a88d8;
• Change the spinner size: adjust width and height of .loader
• Use a custom logo instead of a spinner:

---

🧪 Step 5 — Test Your Preloader

1. Open your store in a browser

2. Refresh the page, preferably with a slow network simulation to see the preloader in action

3. Make sure it disappears once the page fully loads

---

🎉 Final Result

Now your Shopify store will show a smooth preloader animation whenever a page loads, giving a polished and professional impression to your visitors.

This method is lightweight, fast, and doesn’t require any extra apps.