Lenis Smooth Scrolling for Shopify

Smooth scrolling is a hallmark of premium, modern web design. By introducing natural inertial movement, it elevates your store's user experience and makes layouts feel incredibly polished and cohesive.

In this guide, we will walk through how to integrate Lenis, a lightweight, performant, and open-source smooth scrolling library, directly into your Shopify theme.

1. Add Lenis Styles to the Head

First, we need to apply essential CSS rules that prevent layouts from jumping and enable Lenis to handle scrolling seamlessly.

In your Shopify admin, navigate to Online Store > Themes > Edit Code, open your main layout file (typically layout/theme.liquid), and insert the following code block just before the closing </head> tag:

<!-- Lenis Smooth Scrolling Styles -->
<style>
  html.lenis {
    height: auto;
  }
  .lenis.lenis-smooth {
    scroll-behavior: auto;
  }
  .lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
  }
  .lenis.lenis-stopped {
    overflow: hidden;
  }
</style>

2. Add Lenis Script and Settings to the Body

Next, we load the Lenis library via CDN and initialize it. We also include custom event listeners that allow you to start, stop, or toggle scrolling using simple HTML data attributes.

In the same layout/theme.liquid file, paste the following code block just before the closing </body> tag:

<!-- Calling Lenis library from CDN -->
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.23/bundled/lenis.min.js"></script>

<!-- Lenis Settings & Switches -->
<script>
  // Initialize Lenis
  let lenis = new Lenis({
    lerp: 0.1,
    wheelMultiplier: 0.7,
    gestureOrientation: "vertical",
    normalizeWheel: false,
    smoothTouch: false
  });

  // Animation Loop
  function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }
  requestAnimationFrame(raf);

  // Controlling Lenis with attributes
  document.querySelectorAll("[data-lenis-start]").forEach(el => {
    el.addEventListener("click", function () {
      lenis.start();
    });
  });

  document.querySelectorAll("[data-lenis-stop]").forEach(el => {
    el.addEventListener("click", function () {
      lenis.stop();
    });
  });

  document.querySelectorAll("[data-lenis-toggle]").forEach(el => {
    el.addEventListener("click", function () {
      this.classList.toggle("stop-scroll");
      if (this.classList.contains("stop-scroll")) {
        lenis.stop();
      } else {
        lenis.start();
      }
    });
  });
</script>

3. Controlling Lenis on Your Pages

The custom event listeners we included check for elements with attributes like data-lenis-stop, data-lenis-start, and data-lenis-toggle. This is incredibly useful for custom overlays, side drawers, and full-screen modals where you want to disable page scrolling:

• Disable Scroll: Add data-lenis-stop to any button or link (e.g., when opening a modal).
• Enable Scroll: Add data-lenis-start to your close buttons.
• Toggle Scroll: Use data-lenis-toggle to toggle the scroll state on a single interactive element.

Conclusion

With these simple scripts added to your theme.liquid, your Shopify store now has hardware-accelerated smooth scrolling. Enjoy the fluid scrolling animations, and feel free to adjust settings like lerp (controls smoothness) and wheelMultiplier to fine-tune the feel of your site!

Happy designing!