How can I implement a pre-loader code for all pages?

Store Design
, , ,

Topic summary

Goal: Add a custom pre-loader (HTML/CSS) to appear on all Shopify store pages without using an app.

Key guidance provided:

  • Edit theme.liquid (Layout) and insert the pre-loader HTML just before the closing tag so it renders on every page.
  • Add CSS either in an existing theme stylesheet (theme.scss.liquid was suggested) or by creating a new CSS file and linking it in theme.liquid; alternatively, place CSS within tags if added inline in theme.liquid.
  • Steps summarized: Online Store > Themes > Edit code > theme.liquid; add HTML near ; add/link CSS; save and test. Back up the theme before changes.

Dawn theme note:

  • The original poster is using Dawn and did not find theme.scss.liquid; they created a new custom CSS file (empty, without tags). A later reply reiterated placing all pre-loader code before in theme.liquid.

Status/outcome:

  • No confirmation that the pre-loader works yet. Discussion remains open with implementation details provided but not validated by the original poster.
Summarized with AI on January 27. AI used: gpt-5.
1

Hi

I have the code(CSS and HTML) of a pre-loader animation

I want to know where to add that code so that this pre-loader works on all pages while they’re loading

Note * I have the code I’m not interested in any apps I know about a bunch of apps but I don’t want to use an app for that

2

Hello @HamzaIbadat

To add a pre-loader animation to your Shopify store, you’ll need to modify your theme code. Specifically, you’ll need to add the HTML and CSS code for the pre-loader to your theme’s “theme.liquid” file, which is a template that controls the overall layout of your store.

Here’s how you can do it:

  1. From your Shopify admin dashboard, click “Online Store” and then “Themes”.
  2. Find the theme you want to edit and click “Actions” and then “Edit Code”.
  3. In the left-hand sidebar, click on the “Layout” folder and select “theme.liquid”.
  4. Scroll down to the bottom of the file and add the HTML code for your pre-loader. You can add it just above the closing </body> tag to ensure it appears on all pages.
  5. Next, you’ll need to add the CSS code for your pre-loader. You can either add it to the “theme.scss.liquid” file or create a new CSS file and link to it in the “theme.liquid” file. Make sure the CSS code is located within <style> tags.
  6. Save your changes.

Once you’ve added the pre-loader code to your theme, it should appear on all pages while they’re loading.

Note: Keep in mind that modifying your theme code can be tricky, and even small errors can cause big problems. It’s a good idea to back up your theme before making any changes and to test your pre-loader thoroughly to ensure it’s working correctly. If you’re not comfortable modifying your theme code, you may want to consider hiring a Shopify developer to assist you.

3

I’m using the dawn theme and it didn’t have any “theme.scss.liquid”

So I created a new custom css file and it was empty there were no tags it was completely empty

4

Hi @HamzaIbadat

You have theme.liquid in dawn theme. You should paste all your code just before the closing of body tag.