Layout shift is the visual jump you feel when a page rearranges itself after it has already started to render. An image loads and shoves the price down. A review widget appears and pushes the add-to-cart button under your thumb. You tap, and you buy the wrong variant. It is small, it is constant, and it quietly erodes trust.
Cumulative Layout Shift measures exactly this, and product pages are the worst offenders because they are the busiest pages on the store. Gallery, price, variants, badges, reviews, shipping estimates, upsells—each one is a chance to move the page. The fix is a single principle applied everywhere: never let anything arrive without a reserved space.
01 · Cause
Why PDPs shift the most.
A homepage is largely static content the theme controls. A product page assembles itself from many independent parts, several of which load asynchronously and at unpredictable times: media served from a CDN, an app's review stars, a stock badge, a size guide, a "frequently bought together" strip. Any element that appears after first paint and takes up height will push everything below it.
The insidious part is that it usually looks fine on the developer's fast connection, where everything loads almost at once. On a real phone on mobile data, the parts trickle in over a second or two—and every trickle is a shove.
Layout shift is a symptom of content that loaded without an appointment.
02 · Gallery
Reserve the gallery.
The product gallery is the largest element on the page and the most common source of shift. If an image has no declared dimensions, the browser gives it zero height until it downloads, then suddenly expands it—pushing the title, price and buy button down at the exact moment the customer is reaching for them.
- Set explicit width and height, or a fixed aspect ratio, on every gallery image and thumbnail.
- Give the main image a stable container so switching between photos never resizes the frame.
- Reserve space for zoom, video and 3D media the same way—swapping media should never change the box.
Done properly, the gallery occupies its full footprint from the first frame, and the buy controls never move again.
03 · Fonts
The flash of reflowed text.
Web fonts cause a subtler shift. When a custom font loads and replaces the fallback, the text can reflow—especially a long product title or a description that wraps differently. If line counts change, everything below moves.
Use font-display: swap with a fallback whose metrics are close to the web font, preload the fonts the PDP needs, and keep the family list tight. The aim is that when the real font arrives, the text barely moves because the fallback already reserved almost the same space.
The same discipline applies to icon fonts and any late-swapping asset near the buy controls. Reserve its space, match the fallback metrics closely, and preload what the first screen actually depends on. Do that and the reflow that would otherwise nudge the price or the add-to-cart button simply never happens—the content settles into a box that was the right shape from the first frame.
04 · Widgets
Late-loading widgets.
Review stars, trust badges, shipping estimators and upsell blocks are usually injected by apps after the page loads, and they are notorious shift-makers because they insert height into the middle of the layout. The star rating that pops in under the title is a classic culprit.
The fix is to hold their place in advance: a reserved container with the widget's expected height, or a lightweight skeleton, so when the real content arrives it fills the box instead of expanding it. Where an app cannot be tamed, we render a static equivalent from structured data and let the app enhance in place.
05 · Variants
Variant swaps without a jump.
Changing a color or size often updates the image, the price, the availability and sometimes a badge. If any of those change the height of their container—a longer "only 2 left" message, a sale price that adds a strikethrough line—the page shifts on interaction, which counts against you and feels broken.
Design variant states to occupy consistent space: reserve a line for stock messaging whether or not it shows, keep price and compare-at layout stable, and swap gallery images within a fixed frame. Interaction should change what the customer sees, never where it sits.
The same rule applies to a sticky add-to-cart bar, a common mobile pattern. If it mounts late and pushes content, or resizes when the price updates, it undermines the very button it exists to promote. Give it a fixed height from the first paint and let its contents change inside that reserved space, so the one control that drives revenue is exactly where the customer expects it, every time.
Quick check
Is your PDP rock-steady?
- Every gallery image and thumbnail has explicit dimensions.
- Fonts load with a close-metric fallback and swap display.
- Review stars and app widgets have reserved space or skeletons.
- Variant changes never alter the height of price or stock areas.
- The buy button never moves after first paint on a real phone.
Stillness is a feature.
A product page that holds perfectly still while it loads feels engineered and trustworthy, and it protects the one interaction that matters most: the tap that adds to cart. Killing layout shift is not glamorous work, but it is some of the highest-leverage polish on the whole store—cheap to do at build time, expensive to retrofit, and felt by every visitor.