How to Add a Smooth Scroll Effect on Shopify Theme

Author - Moz

Why This Matters

Smooth scrolling feels polished and user-friendly, guiding customers seamlessly across anchor links and sections. While CSS-only smooth scroll (scroll-behavior: smooth) improves modern browser UX, compatibility issues persist on iOS Safari, older Android, and some Shopify themes. A lightweight JavaScript fallback resolves this without relying on paid apps.

⚠️ Heads-up Before You Start

Editing your Shopify theme code requires a basic understanding of HTML, CSS, and JavaScript. Always duplicate your theme to create a backup before making any changes.

Step 1: Open Your Theme Code Editor

From your Shopify admin:

  • Go to Online Store → Themes
  • Click … → Edit code
  • Open assets → base.css file

Step 2: Add CSS Smooth Scroll (Modern Browsers)

On your theme’s main CSS file (usually base.css or theme.css in the assets folder), and add the following code at the bottom:

Copy 

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

Step 3: Add JavaScript Fallback

  • Open the layout → theme.liquid file

In your theme’s layout section, click on the theme.liquid file. Then, paste the following JavaScript code just above the closing </body> tag.

Copy 

<script>
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('a[href^="#"]').forEach(function (link) {
      link.addEventListener('click', function (e) {
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
          e.preventDefault();
          target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
        }
      });
    });
  });
</script>

This ensures reliable smooth scrolling even on browsers without CSS support.

Step 4: Save & Test

  • Save both CSS and theme.liquid files
  • Click links such as <a href="#section2"> to test smooth scrolling between sections
  • Enjoy seamless transitions on all devices

Real-World Insight

A long-scroll diet brand saw +15% time-on-page and 20% higher anchor click-through after adding smooth scroll. That polished UX boosted conversions without bloated third-party apps.

Back to blog
Work With Us