# What on a product page stops shoppers from buying?

> Show the price with shipping cost, a delivery date, 4+ images, returns next to the buy button, reviews and a page that loads fast on phones.

Updated 2026-10-21 · https://trysmbuild.com/guides/product-page-checklist

Shoppers stop when a product page leaves a question open: what the total will cost, when it will arrive, what the product really looks like, and whether they can send it back. Put the price with the shipping cost or free-shipping threshold, a delivery date, at least four images, a returns line by the buy button and reviews near the title on a page that loads fast on a phone.

## Why do shoppers abandon a product page?

Most reasons come down to cost and certainty. Baymard's cart-abandonment survey of US shoppers (updated 2025-09-22) asks people who abandoned an order why they left. Among those who weren't "just browsing":

- 40% said extra costs (shipping, tax, fees) were too high.
- 20% said delivery was too slow.
- 13% weren't happy with the returns policy.
- 12% couldn't see or calculate the total order cost up front.
- 9% said there weren't enough payment methods.

These are self-reported reasons. They overlap, so they don't add up, and they aren't a forecast for your store. They do tell you which questions your product pages have to answer before the shopper reaches checkout.

The page itself is often the weak point. Baymard's product page benchmark (updated 2026-03-18) rates 62% of mobile product pages "mediocre or worse". That figure says how common weak pages are, not what fixing yours will earn.

## What should be next to the price and the buy button?

The buy box is where shoppers decide. Put the answers there, not in the footer or inside a closed tab.

1. **Price under the product name.** On sale items, strike through the old price next to the new one.
2. **Shipping cost or the free-shipping threshold**, next to the price. "Shipping calculated at checkout" hides the total until the address step. (CRO-02)
3. **A delivery date.** "Arrives by Thu, Oct 23" answers the question. "3–5 business days" makes the shopper work out the date. Most platforms have an app or a theme block for this. (CRO-03)
4. **A one-line returns summary** with a link, such as "Free 30-day returns", next to add to cart. Say the window and who pays. (CRO-04)
5. **Stock status in text**: in stock, low stock, sold out, pre-order. When an item is sold out, offer a back-in-stock alert. (CRO-06)
6. **Variant buttons or swatches**, not only a dropdown. Buttons show every option at once and can mark sold-out ones. Picking one should update the price, the image and the URL. (CRO-08)
7. **An add-to-cart button in the page template**, not one that appears only after scripts run, and a click that updates the cart within a few seconds. (CRO-07, ORG-05c)
8. **An express wallet** (Shop Pay, Apple Pay, Google Pay or PayPal) on the product page or in the cart. (CRO-10)
9. **Pay-later messaging** under the price, but only if your checkout offers installments.

Baymard's product page research (updated 2026-03-18) found 44% of sites don't show the return policy near the buy section and 57% don't use buttons for size selection. Both are prevalence figures: how many sites have the gap.

The cart counts too. It should show a subtotal and the shipping cost or rule before it asks for an email or address. (CRO-02-cart)

## What should be above the fold on a phone?

On a 390×844 phone screen, the image gallery often pushes the buy button out of view. Keep the add-to-cart button within the first screen, or add a sticky add-to-cart bar that appears when the shopper scrolls past it. (CRO-07-fold)

Check this on a phone-sized screen with the page fully loaded. Note whether a cookie banner or pop-up covers the buy box.

## How many product images does a product page need?

Show at least four images per product. Four is smbuild's threshold, not an industry rule. Among them:

- one image in scale, on a person or next to a size reference;
- detail shots that show texture, stitching or finish;
- zoom or a full-screen lightbox, opened with a tap on mobile. (CRO-01-zoom)

Baymard found that 56% of users start by exploring product images (2020-04-02). Its product page benchmark (updated 2026-03-18) found 37% of sites lack in-scale images and 23% lack an image on a human model. Those are prevalence figures.

Write alt text that describes each image in words (product, colour, view), not the file name. Next to the images, give dimensions with units, the exact material and care instructions. These answer the questions that otherwise turn into returns. (PDP-D)

## How should reviews appear on a product page?

Show the average rating and the review count near the product title, with the reviews listed below. Then turn on, in your review app:

- a rating histogram;
- sorting or filtering, including by lowest rating;
- replies from you on negative reviews.

Shoppers read the worst reviews first, and a histogram with "sort by lowest" lets them do that. Baymard's product page benchmark (updated 2026-03-18) found 89% of sites don't respond to negative reviews and 63% don't let shoppers browse reviews by reviewer photos (prevalence). If no product has reviews yet, collecting them comes first: smbuild raises CRO-05 to high severity when none of the sampled products shows any.

## How fast does a product page need to be on mobile?

Core Web Vitals use the 75th percentile of real visits. A product page is "good" on phones when all three metrics pass:

| Metric | Good | Needs improvement | Poor |
|---|---|---|---|
| LCP (main content loaded) | ≤ 2.5 s | ≤ 4 s | over 4 s |
| INP (response to taps) | ≤ 200 ms | ≤ 500 ms | over 500 ms |
| CLS (layout shift) | ≤ 0.1 | ≤ 0.25 | over 0.25 |

Real-visit data comes from the Chrome UX Report (CrUX), over a rolling 28-day window. Google Merchant Center's Store Quality program also scores desktop and mobile speed, alongside image resolution, images per item and e-wallets. Google publishes no cut-offs for it.

Fix the slowest metric first:

- **LCP.** The main product image is usually the LCP element. Don't lazy-load the first gallery image, serve it as WebP or AVIF, set width and height, and size it for mobile (smbuild flags images over about 300 KB, its own threshold). Check for render-blocking apps. (CRO-16)
- **INP.** Look at heavy third-party scripts.
- **CLS.** Give images dimensions and stop banners from loading late.

A Google-commissioned Deloitte study (2019, 37 brand sites, 30M+ sessions) found that a 0.1 s improvement across four speed metrics went with 8.4% more retail conversions. That's a correlation from a 2019 sample, not a promise.

## How smbuild checks this

smbuild reads the server HTML of up to 12 of your product pages. It then opens 2 of them in a real browser at 1440×900 and 390×844, picks a variant and clicks add to cart. It never enters checkout. Each result quotes the text it found and says where it looked: visible, inside a collapsed tab, or not found. Phone speed comes from CrUX field data; a store with too little Chrome traffic gets Not measured for CRO-15, not a zero. Guest checkout, form length and payment trust need a walk through your checkout, so they stay Not measured until you give access.

| Check ID | Title |
|---|---|
| CRO-01 | Enough product images (≥4) |
| CRO-01-zoom | Image zoom / lightbox |
| CRO-02 | Price and shipping cost visible before checkout |
| CRO-02-cart | Cart shows a subtotal without email/address |
| CRO-03 | Delivery date estimate on the product page |
| CRO-04 | Return policy summary on the product page |
| CRO-05 | Reviews shown on the product page |
| CRO-05-widget | Review histogram, sorting and merchant responses |
| CRO-06 | Stock status visible in text |
| CRO-07 | Add-to-cart button in the server HTML |
| CRO-07-fold | Add to cart above the fold on a 390×844 phone (or sticky bar) |
| CRO-08 | Variant buttons / swatches (not only a dropdown) |
| CRO-10 | Express wallets (Shop Pay, Apple Pay, Google Pay, PayPal) |
| CRO-15 | Core Web Vitals (CrUX, phone) |
| CRO-16 | Main product image performance |
| PDP-A2 | Price visible next to the product name |
| PDP-D | Dimensions, materials and care on the page |
| ORG-05c | Add to cart works (cart updates within 5 s) |

Not measured without checkout access:

- CRO-09: Guest checkout available and most prominent
- CRO-11: Checkout form length (8–12 fields)
- CRO-12: Trust signals at payment (enclosed card fields, badge)

## Sources

- [Baymard Institute: Cart abandonment rate statistics](https://baymard.com/lists/cart-abandonment-rate) (updated 2025-09-22)
- [Baymard Institute: Current state of e-commerce product page UX](https://baymard.com/blog/current-state-ecommerce-product-page-ux) (updated 2026-03-18)
- [Baymard Institute: Ensure sufficient image resolution and zoom](https://baymard.com/blog/ensure-sufficient-image-resolution-and-zoom) (2020-04-02)
- [Baymard Institute: Shipping speed vs. delivery date](https://baymard.com/blog/shipping-speed-vs-delivery-date) (2023-06-27)
- [Google Merchant Center: Store Quality](https://support.google.com/merchants/answer/14261098) (checked 2026-10-17)
- [Google Merchant Center: Requirements](https://support.google.com/merchants/answer/6363310) (checked 2026-10-17)
- [Chrome for Developers: CrUX API](https://developer.chrome.com/docs/crux/api) (updated 2026-10-13)
- [web.dev: Web Vitals](https://web.dev/articles/vitals) (checked 2026-10-17)
- [web.dev: Milliseconds make millions (Deloitte for Google)](https://web.dev/case-studies/milliseconds-make-millions) (2019 study, checked 2026-10-17)

## Questions

### Should shipping cost be shown on the product page?

Yes. Show the shipping cost or the free-shipping threshold next to the price. In Baymard's survey of US shoppers who abandoned an order (2025-09-22), 40% cited extra costs and 12% couldn't see or calculate the total up front.

### Is "3–5 business days" enough for a delivery estimate?

It's better than nothing, but a concrete date such as "Arrives by Thu, Oct 23" answers the shopper's question directly. A range in days makes them work out the arrival date themselves.

### How many images should a product page have?

At least four, including one in scale (on a person or next to a size reference) and detail shots, with zoom. Four is smbuild's threshold; Baymard found 56% of users start by exploring product images.

### Where should the return policy go on a product page?

In a one-line summary next to the add-to-cart button, with the return window, who pays and a link to the full policy. A footer link or a closed tab is easy to miss.

### What are good Core Web Vitals for a product page?

At the 75th percentile of real phone visits: LCP of 2.5 seconds or less, INP of 200 milliseconds or less, and CLS of 0.1 or less. The main product image is usually what decides LCP.

### Should variants be buttons or a dropdown?

Buttons or swatches. They show every option at once and can mark sold-out ones, while a dropdown hides them. Choosing an option should update the price, image and URL.