How To Add a Preloader of my logo in shopify for free

Store Design
, , , , , ,

Topic summary

A user wants to add a custom logo preloader to their Shopify store using the Dawn theme without paying for apps.

Proposed Solution:

  • Create a preloader.liquid file in the theme’s sections folder with HTML, CSS, and JavaScript code
  • Upload the preloader image (e.g., preloader.gif) to the assets folder
  • Insert {% section 'preloader' %} after the opening <body> tag in theme.liquid
  • The preloader displays until the page fully loads, then hides automatically

Implementation Challenge:
The user is having difficulty locating the <body> tag in their theme.liquid file, reporting they only see head and style tags. They attempted placement at the end of the file without success.

Current Status:
The discussion remains unresolved. Free preloader apps were suggested as alternatives, but the user confirmed these don’t support custom logos on free plans. The user is still seeking guidance on the correct code placement to implement the custom preloader solution.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

hello, I want to add a preloader on my shopify store. I use dawn theme and this is my website: womber.fr
Can someone help me with this ?
Thanks!

1 Like
2

Hello,

Are you familier with coding ? you need to add different codes to acheive a free loader including html, css, and JavaScript I can guide you on this step by step but I recommend that first you make a duplication of your current theme to make sure that in case an error occured that you will not lose anything.

3

Hi @PAUL8 ,

To add a preloader image when opening pages on your Dawn theme Shopify website, you can follow these steps:

  • Create a new file named preloader.liquid in your theme’s sections folder. Add the following code to the file:
<div class="preloader">
  <img src="{{ 'preloader.gif' | asset_url }}" alt="Preloader">
</div>

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

<script>
  window.addEventListener('load', function() {
    var preloader = document.querySelector('.preloader');
    preloader.style.display = 'none';
  });
</script>
  • Add your preloader image file (e.g., preloader.gif) to your theme’s assets folder.
  • Open your theme’s theme.liquid file and include the preloader.liquid section just after the opening tag:
<body>
  {% section 'preloader' %}
  ...
</body>
  • Save the changes.

Here’s how it works:

  • The preloader.liquid section contains the HTML structure for the preloader, which consists of an image wrapped in a
    element.
  • The CSS styles position the preloader to cover the entire screen and center the preloader image vertically and horizontally.
  • The JavaScript code listens for the load event of the window object. Once the page is fully loaded, it sets the display property of the preloader to none, effectively hiding it.

By including the preloader.liquid section in your theme.liquid file, the preloader will be displayed on all pages of your website until the page is fully loaded.

Make sure to replace ‘preloader.gif’ with the actual filename of your preloader image. With these steps, you should have a preloader image displayed when opening pages on your Dawn theme Shopify website.

I hope this helps.

4

Hello, thanks for your help, but I can’t find the body tag…

5

I only saw head and style

6

It’s on your theme.liquid file

7

Yes sure but I only found one at the end of the file, and it’s not working, maybe I did a mistake ?

8

I always have this:

Capture d'écran 2025-01-22 202517.png
Capture d'écran 2025-01-22 202517.png1904×968 19.7 KB

9

Add the following code to the tag:

{% section 'preloader' %}
10

If this is not working, kindly install this app.

https://apps.shopify.com/preloader
https://apps.shopify.com/loadify

11

Hello, thanks for your help, everything is ready for me to start working. Which code do I need to add ?

12

unfortunately they can’t offer custom logo with free plan