Heatmaps place storefront interaction data over your layout in the builder. Use Clicks to find the elements visitors use most, and Scroll to see how far down the layout they reach.
Heatmaps are available for published pages, product templates, collection templates, and blog posts on a connected Shopify store.
Open a heatmap
Click and scroll data appear as an overlay on the canvas in the builder. The Analytics report does not show that overlay.
You can open a heatmap in two ways.
From the layout panel
In Layouts & layers, find the published page, product template, collection template, or blog post.
Open its ⋯ menu and choose Toggle heatmap.
The heatmap overlay and Heatmap panel open on the canvas.
From the report banner
Each layout report includes a Heatmaps banner. That banner is a shortcut — it does not display clicks or scroll depth in the report.
Open Overview → Analytics → Pages.
Select a layout to open its report.
In the Heatmaps banner, click View in builder.
Instant opens the layout on the canvas with the heatmap overlay.
Plan availability
Click and scroll heatmaps require the Pro plan or higher. On Free and Starter, Instant shows an upgrade prompt instead of the overlay. See Upgrade your plan.
Click heatmap
Choose Clicks in the Heatmap panel. The overlay highlights the most and least clicked areas of the layout.
The panel lists each clicked element with its number and share of clicks. Select an element in the list to find it on the canvas. Use the column headings to sort by element or clicks.
Scroll heatmap
Choose Scroll to see how visitor reach changes down the layout. The panel shows:
Scrolled — a depth in the layout
Visitors — how many visitors reached that depth
Drop off — the share of visitors who didn't reach it
Select a row to jump to that depth on the canvas. The overlay also marks the Average fold and Average depth. Hover over the overlay to see what percentage of visitors reached a specific point.
Choose a published version
The version picker defaults to the newest published version, labelled Live version while it is live or Last published version after it has been unpublished.
Open the picker to compare an earlier version from Publish history. Heatmap data and the canvas preview both update to the version you choose.
Check each screen size
Heatmap data follows the active builder viewport. Switch between desktop, laptop, tablet, and mobile to check how behavior changes by screen size.
When no data appears
The panel shows No heatmap data available when the selected layout, version, or screen size has no recorded interactions yet.
Check that:
The layout is published to your connected Shopify store.
You are looking at the published version and screen size your shoppers actually saw.
The live layout has had enough visits to record interactions.
Your customer privacy and cookie banner settings in Shopify are set up the way you expect.
Heatmaps are built from storefront analytics events, so clicks and scroll depth are only recorded for shoppers who allowed analytics. Privacy tools and ad blockers can block those events too. A heatmap therefore reflects part of your traffic rather than every visit. The layout report shows a tracking coverage percentage that indicates how much of your traffic those events cover. See How tracking works.
Allow a short delay for new storefront interactions to appear.
For the rest of the layout report, see Page analytics.