Using Heatwave
Fold analysis
See what shoppers can actually see before they scroll, and whether price and Add to cart are part of it.
The fold is the bottom edge of the first screen: everything a shopper sees before scrolling. On product pages, what sits above the fold matters a lot. If the price or the Add to cart button is below it, many shoppers never get that far.
Heatwave measures the fold on every consenting visit, on the shopper’s real screen, and tracks where your key product elements sit relative to it.
Raw fold and effective fold
Not all of the first screen is useful space. A sticky header, an announcement bar, a cookie banner or a sticky bar at the bottom can cover part of it.
- Raw fold: the full height of the shopper’s screen.
- Effective fold: the raw fold minus anything stuck to the top or bottom of the screen. This is the area where your content can actually be seen.
Heatwave measures both. A pop-up that covers more than half the screen is treated as a pop-up, not as part of your header.
Reading the lines on the heatmap
With First screen selected below the heatmap, you’ll see:
- A dashed line labelled “First screen ends here (typical screen)”: the raw fold for a typical visitor.
- A grey band around it: the spread of fold positions across your visitors, since screens differ in height.
- Darker shading at the top and just above the fold line: space covered by your header and by bottom overlays.
- A second line labelled “First screen ends here (below the header)”: where the content area really ends.
Choose Hide line to remove them.
Key elements Heatwave tracks
On product pages, Heatwave looks for these elements:
- Add to cart button
- Price
- Size / colour picker
- Reviews
- Trust badges
- Payment icons
- Description
- Product photos
It recognises them in Online Store 2.0 themes such as Dawn and in popular review apps. For each element it records whether it was fully on the first screen, partly on it, or below it, and whether the shopper actually saw it later (at least half of it on screen for half a second).
If Heatwave doesn’t find an element in your theme, your developer can mark it by adding data-hw-key=“atc” (or price, variant_picker, reviews, trust_badges, payment_icons, description, media) to the element in your theme code.
Where to find the numbers
- Heatmaps page, “Seen without scrolling”: for the page and device you’re viewing, the share of views where each key element was on the first screen. Green is 80% or more, amber 40% to 79%, red below 40%. If the header and pop-ups cover more than a fifth of the first screen, the card tells you how much.
- Heatmaps page, Scroll map: “How far visitors scroll” also tells you how much of the page fits on a typical first screen.
- Analytics page, “Visible without scrolling”: whether Add to cart is visible without scrolling on mobile and desktop product pages.
- Store health: one of its measurements is “Add to cart visible on mobile”.
- Behaviour patterns: “Add to cart never seen” flags product page visits where the button never came into view at all.
Common fixes
These are general starting points. Your recommendations will be specific to your store and data.
- Make the sticky header smaller on mobile, or stop it from being sticky. Every pixel it takes comes out of the effective fold.
- Shorten or remove the announcement bar on product pages.
- Make the cookie banner or other bottom bars smaller, so they cover less of the first screen.
- Reduce the height of the product image on mobile so price and Add to cart move up.
- Move price and the variant picker above long text such as the description or feature lists.
- Put a short reviews summary near the title instead of only at the bottom of the page.
After a change, click Retake picture on the heatmap, and compare the “Seen without scrolling” numbers over the next days.