How can I turn my logo into an animated preloader image?

Shopify Discussion
2

Hi @usershop2024

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:
  • 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:

  {% section 'preloader' %}
  ...
  • 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.

1 Like