Preloader Section

The Preloader adds a full-screen loading screen that briefly appears when visitors land on your store.

What You’ll Learn

  • How to enable a branded loading screen before your site loads
  • How to customize the background, logo, and text
  • How to set the display duration

🧩 Section Overview

The Preloader adds a full-screen loading screen that briefly appears when visitors land on your store. This is useful for enhancing brand presentation and creating a more polished user experience during the initial page load.

You can display either text or an image (like a logo) along with custom background colors and timing.

How to Enable the Preloader

  1. In the Shopify Theme Editor, open the Theme Settings
  2. Locate and expand the Preloader panel
  3. Toggle on the Preloader Logo Type (choose between Text or Image)

Preloader Settings

Preloader Logo Type

  • Text: Displays a brand or theme name
  • Image: Use your logo or an animated visual

Preloader Text

  • Add a short title (e.g., “Plain Jane 3.0”)
  • Customize the Text Color
  • Adjust Text Size using the slider

💡 Tip: Use bold or large fonts for more visual impact

Preloader Image

  • Upload a static or animated image (like a .GIF or .webp)

Background Color

  • Set the background color of the preloader screen

Preloader Duration

  • Controls how long the screen is shown (in seconds)
  • Default is 1 second; increase for longer loading animation effects

Example Use Cases

  • Display your logo animation before the store opens
  • Match the Preloader background with your Hero section for a seamless transition
  • Use branded text like: “Loading Collection…” or “Powered by Plain Jane”

⚠️ Keep durations short (1–3 seconds) to avoid slowing down user access

Styling Tips

  • Match the preloader’s colors to your brand palette
  • Keep the text minimal for a clean look
  • Use a transparent or white background for a lightweight feel

Need Help?