How to import Codepen code for loading screen into Dawn theme

[thirsttrap]

Hi all, I am trying to import these codes for a loading screen on the Dawn theme. Can anyone help me with this?

Sample code: https://codepen.io/chrisgannon/pen/WNNJqXz

Website: www.ourthirsttrap.com

Password: ilovethirsttrap

[PageFly-Amelia]

Hi @thirsttrap ,

This is Amelia from PageFly - a Landing Page Builder App,
You can try to do some steps below to embed the loading animation to your page.

Step 1: Access the Theme Editor

1. Go to your Shopify admin panel.

2. Navigate to Online Store > Themes.

3. Click on Actions > Edit code next to your Dawn theme.

Step 2: Create a New Snippet for the Loading Screen

1. In the left sidebar, find and click on the Snippets folder.

2. Click Add a new snippet and name it loading-screen.

Step 3: Add the HTML and CSS from CodePen

1. Copy the HTML and CSS from the CodePen example.

2. Paste the HTML code into the loading-screen.liquid snippet.

3. In the Assets folder, open the theme.css or base.css file.

4. Add the CSS code from the CodePen example to the bottom of the file.

Step 4: Add JavaScript for the Loading Screen

1. In the Assets folder, click Add a new asset and create a new JavaScript file (e.g., loading-screen.js).

2. Copy the JavaScript code from the CodePen example and paste it into the new JavaScript file.

Step 5: Include the Snippet and JavaScript in Your Theme

1. In the Layout folder, open theme.liquid.

2. Add the following line to include the loading screen snippet where you want it to appear:

{% include 'loading-screen' %}

    3. Add the following line before the closing </body> tag to include the JavaScript file

<script src="{{ 'loading-screen.js' | asset_url }}"></script>

Note: When you add the Javascript from Codepen to the loading-screen.js file. You need to copy this code to the end of that file to make this work.

document.addEventListener('DOMContentLoaded', function() {
  var loadingScreen = document.querySelector('.mainSVG');
  window.addEventListener('load', function() {
    loadingScreen.style.display = 'none';
  });
});

I hope that my solution works for you.

Best regards,

Amelia | PageFly