Shopify Scroll Depth: Where Visitors Stop

Every Shopify store has content that nobody sees. The reviews section, the shipping FAQ, the sizing detail, the second half of the homepage — built with effort, positioned below the point where most visitors stop, and therefore functionally absent.

Scroll depth is how you find out which parts of your store are in that category. It is a simple metric that is unusually easy to misread, so most of this guide is about reading it correctly.

What scroll depth measures#

Scroll depth records how far down a page a visitor got, usually expressed as a percentage of total page height or against fixed thresholds — 25%, 50%, 75%, 100%.

A scroll map visualises it as a gradient over the page, with a marked line showing where some proportion of visitors dropped off. That line is the useful part: everything below it reaches a shrinking minority of your traffic.

The core insight is blunt. Content below the drop-off point is not persuading anyone, no matter how good it is. Before you rewrite it, consider moving it.

Four traps that make scroll depth lie#

Scroll depth is the metric people most often misinterpret, in fairly predictable ways.

1. Percentage of a long page is not the same as a short one#

Reaching 50% of a page with twelve sections is a completely different behaviour from reaching 50% of a page with four. Percentages are only comparable between pages of similar length.

Do this instead: think in terms of viewports or absolute pixel depth, and always map the drop-off point to which element sits there. "Most visitors stop just above the reviews block" is actionable. "Average scroll depth is 47%" is not.

2. Scrolling is not reading#

A visitor can flick to the bottom of a page in half a second having absorbed nothing. Fast scrolls to the footer are common, especially on mobile, and they inflate depth metrics without representing attention.

Do this instead: combine scroll depth with time on section or an engagement map. A region that visitors reach and dwell in is being consumed. A region they pass through at speed is not. If your tool offers only raw depth, filter out very short sessions before drawing conclusions.

3. Mobile and desktop are different pages#

Responsive themes stack content differently. The element sitting at the fold on desktop may be three screens down on mobile, and mobile is most of your traffic. A blended scroll map describes a page nobody actually saw.

Do this instead: always segment by device. This is not optional — see the same rule in the Shopify heatmap guide.

4. Lazy loading and dynamic height#

Pages that load content as you scroll, or that shift height when reviews and images arrive, make percentage-based depth unstable between sessions. So do popups that lock scrolling, sticky headers, and infinite-scroll collection pages.

Do this instead: check whether your tool measures against final page height or height at load time. On collection pages with infinite scroll, use a "products viewed" style metric instead of scroll percentage — it is the same question with a stable denominator.

Where the drop-off point matters most#

Product pages#

The highest-value place to measure. Ask one question: do your objection-handling elements sit above the drop-off point?

Specifically:

• Reviews. If most visitors never reach them, your social proof is doing nothing. Move the aggregate rating into the buy box and surface two or three reviews mid-page.
• Shipping and returns. These are decision inputs, not policy documents. They belong next to the price, not at the bottom.
• Size and fit information. Adjacent to the variant picker.
• Specifications. If people stop before your dimensions table, they leave to find dimensions and do not come back.

A useful comparison: measure scroll depth separately for sessions that converted and sessions that did not. If buyers consistently reached a section that non-buyers did not, that section is doing work and deserves to be higher. Full method in the product page optimization playbook.

Homepages#

Homepages are where the most content dies. A merchant builds six sections; visitors see two.

Find the drop-off point and ask honestly what is below it. Common answers: the brand story, the second and third collection rows, the testimonial block, the newsletter signup. If the drop-off happens early, the answer is usually not "add more" — it is that the top of the page is not giving people a reason to continue.

Also check whether your carousel is a problem. Slides after the first are seen by far fewer people than merchants assume, and scroll depth combined with a click map will show you exactly how much less.

Collection pages#

Here scroll depth means something different: how many products did the visitor see? If most stop after the first row or two, your first row is effectively your whole collection page, and sort order becomes one of the highest-leverage settings in your store.

Check the sort default. Alphabetical or arbitrary ordering on a page where most visitors see six products is an expensive default.

Cart and checkout#

Scroll depth here is a red flag rather than an insight. If people are scrolling substantially on a cart page, something important is below the fold — usually the checkout button, the shipping estimate, or the express wallet options. All three should be visible without scrolling. See 10 Shopify checkout fixes.

How to act on what you find#

1. Move, do not rewrite. The first response to "nobody sees the reviews" is to move the reviews, not to get better reviews. Repositioning is cheap, fast, and reversible.

2. Compress the top of the page. If the drop-off point is early, the problem is usually above it: an oversized hero, a video that delays content, a stack of promotional bars, or a slow first paint that costs you visitors before they can scroll at all.

3. Cut what is stranded and not worth moving. If a section is below the drop-off and does not deserve promotion, delete it. Shorter pages scroll better, load faster, and are easier to maintain.

4. Give people a reason to continue. A visible section boundary at the fold — a partially visible heading or image — signals that there is more below. A page that looks finished at the fold gets treated as finished.

5. Re-measure after every change. Moving a section changes the height of everything below it, which changes the drop-off point for other content. Scroll depth work is iterative by nature.

A practical measurement setup#

If you have a behaviour analytics tool, scroll maps come built in — DynoWeb's heatmaps include them alongside click and friction data, which is the combination you want, since scroll depth tells you where attention ends and click data tells you what it did before that.

Without one, you can approximate:

• Configure scroll-depth events in your analytics at 25/50/75/100% thresholds on your key templates.
• Record the element that sits at each threshold on both mobile and desktop, since the percentage alone is not interpretable.
• Segment by device and, if possible, by converted versus not converted.

Then keep the discipline: whenever you look at a scroll number, translate it into an element name before you draw a conclusion.

The question to keep asking#

For every important element on every important page: what percentage of visitors on this device ever saw it?

Most merchants have never asked this and are surprised by the answer. It routinely turns out that the review section, the guarantee, the shipping promise, and the size guide — the four things most likely to close a hesitant shopper — are all sitting below the point where the majority of traffic stopped.

Moving them up is one of the cheapest conversion improvements available, and unlike most CRO work it requires no new content, no new photography, and no test. Just a reordering of what you already built.

Next: the complete Shopify heatmap guide for the other half of the picture, and dead clicks for what visitors try to interact with once they get there.