Dawn theme custom liquid section customization - urgent

Store Design
, , , , , , , ,

Topic summary

A user is experiencing a loading delay with a custom Liquid form embedded on their Shopify page and wants to add a section-specific preloader/spinner to improve user experience during this delay.

Solutions Proposed:

  • MandasaTech’s approach: Wrap the form in a container div, add CSS to style a loading message, and use JavaScript with DOMContentLoaded to hide the loader after the form loads (using either a timeout or event listeners).

  • tim_1’s solution: Provided ready-to-use code (markup not visible in text) to be added at the bottom of the Custom Liquid section, with a visual demonstration (GIF) showing the spinner in action.

Implementation:
Both solutions recommend placing the code at the bottom of the existing Custom Liquid section. The user requested complete code placement instructions from MandasaTech.

Status: The discussion appears ongoing, with the user seeking clarification on exact code placement.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

On my website, I’ve embedded a form using custom Liquid code. When visiting the page, there is a slight loading delay for that section. I’d like to implement a spinner (preloader) specifically for the form section to improve user experience during this loading time.

Is it possible to create a preloader that only affects this section, rather than the entire page?

Here’s the page in question: https://varthagaminternational.in/pages/get-sample

Thanks in advance for your help!

2 Likes
2

Hello @Sivadarshan

Yes, it’s absolutely possible to implement a preloaded for just a specific section (like your form) without affecting the entire page load.

Here’s a basic approach you can follow:1. Wrap your form in a container, for example:

<div id="form-wrapper">
  <div id="form-loader">Loading...</div>
  <!-- Your form embed code -->
</div>
  1. Add CSS for the loader:
#form-loader {
  display: block;
  text-align: center;
  padding: 20px;
  font-size: 16px;
}
#form-loaded .form-loader {
  display: none;
}
  1. Use JavaScript to hide the loader once the form loads:
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const formWrapper = document.getElementById("form-wrapper");
    // Adjust this based on when your form finishes loading (e.g., iframe load, ajax complete, etc.)
    setTimeout(() => {
      formWrapper.classList.add("form-loaded");
    }, 1000); // You can use actual event listeners if applicable
  });
</script>

This way, the spinner only affects your form area and improves the UX during that short load time.

Let me know if you need help tailoring it to your exact code. Happy to help further!

3

You can add the following code to the bottom of your “Custom Liquid”, or in a separate “Custom Liquid” section:

ezgif-33b9cdf2e62681.gif

4

@MandasaTech please can you give the complete where I want to embed the codes

5

You can add this code to the bottom of your Custom Liquid.