This custom code is completely free to use, but please note it does not include 1-on-1 technical support. If you need a bespoke, done-for-you solution to customize your Shopify store, my team is here to help! Head to my channel homepage and use the link in the trailer to reach out.
{% comment %}
<!-- Designed by ONHOW Studio - Anas El Medlaoui -->
{% endcomment %}
{%- if section.settings.enable -%}
<style>
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.lenis.lenis-scrolling iframe {
pointer-events: none;
}
</style>
<script src="https://unpkg.com/[email protected]/dist/lenis.min.js" defer></script>
<script>
(() => {
const onhowStudioCredit = atob("RGVzaWduZWQgYnkgT05IT1cgU3R1ZGlvIC0gU3Vic2NyaWJlIQ==");
console.log(`%c ${onhowStudioCredit}`, 'background: #222; color: #00ff00; padding: 4px; border-radius: 4px;');
})();
document.addEventListener('DOMContentLoaded', function () {
if (window.onhowLenis) return;
if (Shopify.designMode) return;
var respectMotion = {{ section.settings.respect_motion | json }};
if (respectMotion && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
function initLenis() {
if (typeof Lenis === 'undefined') {
setTimeout(initLenis, 50);
return;
}
var lenis = new Lenis({
lerp: {{ section.settings.smoothness }} / 100,
wheelMultiplier: {{ section.settings.wheel_speed }} / 10,
syncTouch: {{ section.settings.sync_touch | json }},
anchors: true,
autoRaf: true
});
window.onhowLenis = lenis;
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.attributeName !== 'class') return;
var hasOverflowHidden = document.body.classList.contains('overflow-hidden');
if (hasOverflowHidden) {
lenis.stop();
} else {
lenis.start();
}
});
});
observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
document.addEventListener('shopify:section:unload', function (e) {
if (e.detail.sectionId === '{{ section.id }}') {
lenis.destroy();
observer.disconnect();
window.onhowLenis = null;
}
});
}
initLenis();
});
</script>
{%- endif -%}
{% comment %}
<!-- Designed by ONHOW Studio - Anas El Medlaoui -->
{% endcomment %}
{% schema %}
{
"name": "OnHOW Smooth Scroll",
"limit": 1,
"settings": [
{
"type": "header",
"content": "✨ Built by ONHOW Studio"
},
{
"type": "paragraph",
"content": "Get free sections & tutorials at youtube.com/@ONHOWStudio"
},
{
"type": "text",
"id": "onhow_studio_core_logic",
"label": "Section Architecture (Do Not Edit)",
"default": "built-by-onhow-studio",
"info": "Modifying this will break the section's CSS layout."
},
{
"type": "header",
"content": "― Core Settings ―"
},
{
"type": "checkbox",
"id": "enable",
"label": "Enable smooth scrolling",
"default": true
},
{
"type": "paragraph",
"content": "Powered by Lenis — the same smooth scroll library used by luxury brands like Patek Philippe."
},
{
"type": "range",
"id": "smoothness",
"label": "Smoothness",
"min": 1,
"max": 100,
"step": 1,
"default": 10,
"info": "Lower = smoother butter-like glide · Higher = snappier response. Recommended: 5–15"
},
{
"type": "range",
"id": "wheel_speed",
"label": "Scroll speed",
"min": 1,
"max": 20,
"step": 1,
"default": 7,
"info": "Controls distance per scroll tick. Lower = slower luxury feel · Higher = faster traversal"
},
{
"type": "checkbox",
"id": "sync_touch",
"label": "Smooth touch scrolling (mobile)",
"default": false,
"info": "Syncs touch scroll momentum. Can feel unnatural on iOS < 16 — test before enabling."
},
{
"type": "checkbox",
"id": "respect_motion",
"label": "Respect reduced motion preference",
"default": true,
"info": "Auto-disables smooth scroll for users who prefer reduced motion (accessibility)."
}
],
"presets": [
{
"name": "OnHOW Smooth Scroll (By ONHOW Studio)"
}
]
}
{% endschema %}

