Where you can achieve what your competitors can’t


Smooth Scroll in Shopify

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 %}