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-stopto any button or link (e.g., when opening a modal). - Enable Scroll: Add
data-lenis-startto your close buttons. - Toggle Scroll: Use
data-lenis-toggleto 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!