Pre loader screen

Shopify Discussion

Topic summary

Main topic: Adding an animated pre-loader (a loading animation shown before content renders) to the Shopify Dawn theme.

Proposed implementation:

  • Insert a preloader container div right after the opening in theme.liquid.
  • Add CSS (in base.css or theme.css) for a centered spinner (#preloader and .loader with a spin keyframe animation).
  • Add JavaScript before to remove/hide the preloader once the page fully loads.

Issue encountered:

  • After implementation, a stray text string “class=“gradient animate–hover-default”>” appears on page reload.

Diagnosis and fix:

  • The helper identified an accidental extra code snippet causing the visible text, seen in the browser inspector.
  • Recommended removing the stray snippet in theme.liquid (suggested around line ~769).
  • Provided screenshots (images) showing the inspector output and the likely code location, which are central to the fix.

Status:

  • No explicit confirmation from the original poster yet; expected resolution after removing the extra code. Discussion appears open pending confirmation.
Summarized with AI on December 19. AI used: gpt-5.
1

Does anyone know how I can add an animated pre-loader screen for dawn theme?

2

Hi @KarimAyman ,

To add an animated pre-loader screen to the Dawn theme, you can follow these steps:

1. Add HTML for the Preloader:

You will need to add a div in your theme to serve as the pre-loader container. Here’s how to do it:

From your Shopify admin, go to Online Store > Themes.

Next to Dawn, click Actions > Edit code.

In the theme.liquid file, just after the opening tag, add this HTML code:

2. Add CSS for the Preloader Animation

Next, you’ll add the CSS to style and animate the loader.

In the Assets folder of your Dawn theme, locate the base.css or theme.css file and add this code at the bottom:

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

.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db; /* Customize the loader color */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

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

3. Add JavaScript to Remove the Preloader

You want the preloader to disappear once the page has fully loaded.

For this, you need to add a script in the theme.liquid file just before the closing tag:

4. Save and Preview Save your changes and preview your store.

The animated preloader should now appear while the page loads, and disappear once the content has fully loaded.

This method provides a basic preloader. You can customize it by adjusting the styles, animation, and behavior to fit your store’s theme.

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

1 Like
3

Hi, this message came up when I reloaded my page. class=“gradient animate–hover-default”>

4

HI @KarimAyman ,

I have checked your website, I see this text " class=“gradient animate–hover-default”>" in inspector view (f12) like this:

BSSCommerceB2B_0-1726913190507.png
BSSCommerceB2B_0-1726913190507.png1909Ă—997 494 KB

It seems like you’ve accidentally copied some extra code, which is why there’s this extra text. Please find and remove it. You might want to check for this in theme.liquid, possibly around line 769.

BSSCommerceB2B_1-1726913419590.png
BSSCommerceB2B_1-1726913419590.png575Ă—673 25.7 KB

After removing it, the message won’t come up when you reload my page.

Hope it helps!