How to add a loading mark picture? HELP ME ASAP

Store Design
, ,
1

hello

I want to add a loading mark.

I want the logo image to be displayed while the page is loading, so please tell me how to edit it using CSS or code.

The idea is to have a plain background with the logo displayed in the center, fading in and out. I want the display position to be centered both vertically and horizontally.

Since the site is not public yet, please use a path for now. The theme I am using is:

Madrid 1.4.0 (Preset: Madrid)

Behindyou Behindyou

8A90B170-66B8-4594-8A47-7AFAA7751A35

2

@BY2025 ,

Add this HTML

Online Store → Themes → Edit code → layout/theme.liquid
Paste right after <body>

<div id="page-loader">
  <img src="{{ 'logo.png' | asset_url }}" alt="Loading">
</div>

(Replace logo.png with your logo asset name)

Add this CSS

Open base.css / theme.css and add:

#page-loader {
  position: fixed;
  inset: 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#page-loader img {
  width: 120px;
  animation: fadePulse 1.5s infinite ease-in-out;
}

@keyframes fadePulse {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

Add this JS

Before </body> in theme.liquid:

<script>
window.addEventListener("load", function () {
  document.getElementById("page-loader").style.display = "none";
});
</script>
3

Hi，Thank you for your support.

I tried applying the instructions you provided, but as shown in the attachment, the image does not display.

Do you know where the problem might be?

If I made a mistake, I didn’t really understand the part about replacing the image (Replace logo.png with your logo asset name).

Is it possible to have code that reflects the content image URL?

Also, can the background color during loading be set to <#EFE9D4>?

2026年2月11日(水) 19:34 oscprofessional <notifications@community.shopify.com>:

(attachments)

S__45703189.jpg
S__45703189.jpg870×1882 43.5 KB

4

Hi,

Hope this will help

Add a full-screen preloader overlay in theme.liquid

<div id="page-loader">
  <img src="/path-to-your-logo/logo.png" alt="Loading logo">
</div>

Upload your logo to Assets and reference it with asset_url so the path stays stable inside Shopify

Center the logo using flexbox, animate it with CSS keyframes

CSS example

#page-loader {
  position: fixed;
  inset: 0;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#page-loader img {
  width: 120px;
  animation: fadePulse 1.5s ease-in-out infinite;
}

@keyframes fadePulse {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

Hide it on window.load using a short fade-out script

Example

<script>
  window.addEventListener("load", function () {
    const loader = document.getElementById("page-loader");
    loader.style.opacity = "0";
    loader.style.transition = "opacity 0.5s ease";

    setTimeout(function () {
      loader.style.display = "none";
    }, 500);
  });
</script>
5

Are you working on the store yourself?