How to Track Scroll Events in Shopify (2026)

Key takeaways

• Scroll tracking fires analytics events when visitors reach 25%, 50%, 75%, and 100% of a page’s length.
• The easiest method is using Google Tag Manager’s built-in Scroll Depth trigger.
• For stores without GTM, custom JavaScript in theme.liquid achieves the same result.
• Scroll data is most useful on long product pages, landing pages, and blog posts.

Scroll depth tracking tells you whether visitors actually read your content or bounce after seeing the first screen. On long Shopify product pages — with descriptions, reviews, FAQs, and upsells — knowing how far shoppers scroll before buying (or leaving) is actionable data.

Why scroll tracking matters for Shopify

If 80% of visitors to your product page never scroll past the fold, your above-the-fold content is doing all the work. If only 10% see your reviews section, moving it higher up could improve conversion. Scroll depth gives you data to make layout decisions with confidence.

It’s especially useful when:

• You’re A/B testing long vs. short product descriptions
• You have upsell sections far down the page and want to know if anyone sees them
• You’re running landing page campaigns and need to understand engagement

Method 1 — Google Tag Manager scroll depth trigger (easiest)

If your store has GTM installed, scroll depth tracking is built in as a native trigger type.

Step 1 - Open Google Tag Manager → your Shopify container

Step 2 - Go to Triggers → New → click Trigger Configuration

Step 3 - Select Scroll Depth

Step 4 - Configure the trigger:

• Vertical Scroll Depths: check the box, enter 25,50,75,100 (percentages)
• Enable for: All Pages (or filter to specific page paths)
• Click Save and name the trigger (e.g., “Scroll Depth - All Pages”)

Step 5 - Create a GA4 Event tag to fire on this trigger:

• Tags → New → Google Analytics: GA4 Event
• Event Name: scroll (this matches GA4’s enhanced measurement naming)
• Event Parameters: add percent_scrolled → value: {{Scroll Depth Threshold}}
• Firing Triggers: select your new Scroll Depth trigger

Step 6 - Submit and publish your GTM container

You’ll now see scroll events in GA4 under Events → scroll, with the percent_scrolled parameter showing 25, 50, 75, or 100.

Note: GA4’s Enhanced Measurement already includes basic scroll tracking (fires at 90% scroll by default). GTM’s approach gives you more data points (25%, 50%, 75%) and works on pages excluded from Enhanced Measurement.

Method 2 — Custom JavaScript in theme.liquid

For stores without GTM, add scroll tracking directly to theme.liquid.

Step 1 - Duplicate your theme. Online Store → Themes → three-dot menu → Duplicate.

Step 2 - Open theme.liquid in the code editor. Add this before the closing </body> tag:

<script>
(function() {
  var thresholds = [25, 50, 75, 100];
  var fired = {};

  function getScrollPercent() {
    var h = document.documentElement;
    var b = document.body;
    var st = 'scrollTop';
    var sh = 'scrollHeight';
    return Math.round(
      (h[st] || b[st]) /
      ((h[sh] || b[sh]) - h.clientHeight) * 100
    );
  }

  window.addEventListener('scroll', function() {
    var percent = getScrollPercent();
    thresholds.forEach(function(threshold) {
      if (percent >= threshold && !fired[threshold]) {
        fired[threshold] = true;
        // Send to GA4 (requires gtag.js)
        if (typeof gtag !== 'undefined') {
          gtag('event', 'scroll', {
            'percent_scrolled': threshold
          });
        }
        // Or send to dataLayer for GTM
        if (typeof dataLayer !== 'undefined') {
          dataLayer.push({
            'event': 'scroll_depth',
            'scroll_percent': threshold
          });
        }
      }
    });
  });
})();
</script>

Step 3 - Save and test. Open your store, open Chrome DevTools (F12) → Console. Scroll down and you should see events firing.

How to get scrolling text on Shopify?

If you’re looking for scrolling text (like a marquee or ticker banner) rather than scroll event tracking, that’s a different feature. In the Theme Editor, look for an “Announcement bar” or “Marquee” section — some themes include scrolling text sections. If your theme doesn’t have one, Fudge can build it: “Add a scrolling marquee announcement bar showing our sale offers.”

Reading scroll data in GA4

After scroll tracking is set up, find the data in GA4:

• Reports → Engagement → Events — look for the scroll event
• Click on the event to see the breakdown by percent_scrolled parameter
• Compare pages — use Explore → Free Form to compare scroll depth between your product page variants

Useful questions to answer with this data:

• What percentage of visitors reach the “Add to Cart” button on product pages?
• Do mobile users scroll as far as desktop users?
• Does a shorter product description improve scroll completion (i.e., more people see the buy button)?

Scroll tracking on specific page types

You might not want scroll data for every page — the checkout and account pages aren’t useful for content optimization. Filter your tracking to focus on:

• Product pages (/products/)
• Collection pages (/collections/)
• Landing pages (/pages/)
• Blog posts (/blogs/)

In GTM, add a page path filter to your Scroll Depth trigger. In the custom JS approach, add a path check at the start of the script.