Use this code snippet to create the smooth scrolling effect on your Shopify website.
// For Shopify, 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>
// For Shopify, just before the closing body tag
// Calling Lenis
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.23/bundled/lenis.min.js"></script>
// Lenis Settings & Switches
<script>
let lenis = new Lenis({
lerp: 0.1,
wheelMultiplier: 0.7,
gestureOrientation: "vertical",
normalizeWheel: false,
smoothTouch: false
}); function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
} requestAnimationFrame(raf); 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>
To apply this effect to your Shopify website, simply follow the instructions written in the comments of the code. See visual examples below.
The code snippets above will work out of the box. If you're interested in learning more or playing with the settings that come with Lenis, you can visit the official Lenis Smooth Scrolling GitHub docs.
Adding Lenis To Your Shopify Store
In Shopify, you'll want to add the "Lenis Smooth Scrolling Styles" just before the </head> closing tag in your main "theme.liquid" file.
Then, you'll want to add the "Calling Lenis" and "Lenis Settings & Switches" just before the </body> closing tag in your main "theme.liquid" file.
Save the code and publish your website to see smooth scrolling magic in action!
