Add Mouse Stalker to Shopify page

BENIBITES · ‎02-25-2025

I am trying to add mouse stalker to our Shopify page.

We use Dawn theme and GemDages Builder for our page construction.

Mouse stalker scripts are tested using CodePen
https://codepen.io/Jay_baxs/pen/bNGVQgo
Using html to set div and ID.
css to style the mouse stalker.
JavaScript to control the movement.

I am new to Shopify and liquid, and having difficulty applying this code to Shopify.
If someone can advise me on where and how I can make this work.

Thank you in advance.

Nilankar · ‎02-25-2025

Use canvas element instead of div, add script in theme.liquid to apply on all pages.

Mark this as accepted if it fixed your problem. Need custom development or technical assistance?
Say hello on WhatsApp | Email : nilankar19@gmail.com
Feeling Generous? ☕Buy Me a Coffee

BENIBITES · ‎02-25-2025

Thank you!
I will try using canvas instead of div.

BENIBITES · ‎02-26-2025

I have used canvas instead of div, but no luck.

I am attaching the place I have located the code in theme.liquid file.

css : starting from line 270, at the very end of the css area.
Javascript &colon; starting from line 318, after another <script>
canvas tag : line 330 after <body> and <a>

If you see any issues, it will be great if you can point it out for me.

Thank you in advance.

~~~~~
      @media screen and (min-width: 750px) {
        body {
          font-size: 1.6rem;
        }
      }

      #mouse-stalker {
        pointer-events: none;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 64px;
        height: 43px;
        background-image: url("https://cdn.shopify.com/s/files/1/0646/7679/0455/files/Vector.png?v=1740537712");
        transform: translate(0,0);
        transition: transform 0.2s;
        transition-timing-function: ease-out;
        z-index: 999;
        }
    {% endstyle %}

    {{ 'base.css' | asset_url | stylesheet_tag }}

    {%- unless settings.type_body_font.system? -%}


~~~~~

    <script>
      if (Shopify.designMode) {
        document.documentElement.classList.add('shopify-design-mode');
      }
    </script>

    <script>
      const stalker = document.getElementById('mouse-stalker'); 
        document.addEventListener('mousemove', function (e) {
        stalker.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
      });
    </script>
  </head>

  <body class="gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %}">
    <a class="skip-to-content-link button visually-hidden" href="#MainContent">
      {{ 'accessibility.skip_to_text' | t }}
    </a>
    <canvas id="mouse-stalker"></canvas>

    {%- if settings.cart_type == 'drawer' -%}
      {%- render 'cart-drawer' -%}
    {%- endif -%}

Nilankar · ‎02-26-2025

First you have learn basics of scripting language.
learn about canvas element then implement.

Mark this as accepted if it fixed your problem. Need custom development or technical assistance?
Say hello on WhatsApp | Email : nilankar19@gmail.com
Feeling Generous? ☕Buy Me a Coffee

Add Mouse Stalker to Shopify page

Add Mouse Stalker to Shopify page

Community Blog Articles