Product page checklist: what stops shoppers from buying

A product page checklist based on Baymard and WebAIM research: price, shipping and returns, images, reviews, mobile add to cart, pop-ups, search, keyboard use.

FixReports editorial team11 min read

Shoppers most often stop on a product page when they can't work out the full cost, can't find shipping and returns terms, can't judge the product from its photos and reviews, or can't easily reach and use the buy button, especially on a phone. Pop-ups that cover the page, policy pages that are hard to find, a site search that can't answer simple questions, and controls that don't work with a keyboard block purchases too. The figures below are industry research figures from Baymard Institute and WebAIM, based on large samples of sites and shoppers; they describe common patterns, not predictions for any single store.

Key points

  • In Baymard's 2026 survey of 1,083 US adults who had shopped online in the past three months, 40% said they had abandoned a purchase at checkout because extra costs such as shipping, tax and fees were too high (Baymard Institute (opens in a new tab)).
  • Baymard's product page benchmark found that 67% of leading ecommerce sites give no total cost estimate near the buy section, and 44% don't show or link the return policy from the main product content (Baymard Institute (opens in a new tab), updated March 18, 2026).
  • In the same benchmark, 62% of mobile sites had "mediocre" or worse product page UX.
  • WebAIM detected WCAG failures on 95.9% of the top one million home pages in February 2026 (WebAIM (opens in a new tab)).
  • In a 2021 Baymard review of 33 top-grossing ecommerce sites, 45% had functionality that couldn't be operated with a keyboard (Baymard Institute (opens in a new tab)).

Why do shoppers abandon a purchase?

The most common answer is that shoppers were only browsing; after that come extra costs, slow delivery, low trust in card handling and forced account creation.

Baymard's cart abandonment page puts the average documented abandonment rate at 70.22%, calculated from 50 studies (page last updated September 22, 2025). Its chart of reasons, labelled as 2026 data, comes from a survey of 1,083 US adults who had shopped online in the previous three months. Respondents could pick more than one reason (Baymard Institute (opens in a new tab), as of October 2026):

Reason for abandoning an online purchase at checkoutShare of respondents
I was just browsing / not ready to buy42%
Extra costs too high (shipping, tax, fees)40%
Delivery was too slow20%
I didn't trust the site with my credit card information19%
The site wanted me to create an account18%
Too long or complicated checkout process17%
Website had errors or crashed17%
Return policy wasn't satisfactory13%
I couldn't see or calculate the total order cost up front12%
The credit card was declined10%
There weren't enough payment methods9%

These are US survey results about checkout, not measurements of your store. Several of them start earlier, on the product page, where shoppers first see the price, the delivery terms and the return conditions. Only your own analytics can show which ones matter for you.

Is the full price clear on the product page?

The current price, any original price, what is or isn't included, and an estimate of shipping should all sit next to the buy button.

Baymard's 2026 product page benchmark found that 67% of sites don't provide a "total order cost" estimate near the buy section, and that 81% don't show a price per unit for products sold in different quantities or sizes (Baymard Institute (opens in a new tab)). Check that the page shows:

  • The current price and, on sale items, the original price.
  • A unit price for products sold in several sizes.
  • Whether tax or duties are included.
  • The shipping cost, or the order value that gets free shipping.

Shopify: in the Dawn theme, the price block adds "Taxes included." and a "Shipping calculated at checkout." link when those settings and a shipping policy exist (Dawn source (opens in a new tab)). That is accurate but not an estimate, so add your actual rates or free-shipping threshold in a text block.

WooCommerce: the options "Enable the shipping calculator on the cart page" and "Hide shipping costs until an address is entered" under WooCommerce > Settings > Shipping affect the cart and checkout, not the product page (WooCommerce source (opens in a new tab)). Put rates in the product template or short description.

Can shoppers find shipping and returns information before adding to cart?

Put a short summary of delivery time, shipping cost and the return window near the buy button, with a link to the full policy.

In Baymard's Consideration & Purchase Behavior survey of 1,032 respondents, 60% said they look for return policy information on the product page, yet 44% of benchmarked sites don't display or link it from the main product content (Baymard Institute (opens in a new tab)). In the 2026 abandonment survey above, 20% cited slow delivery and 13% an unsatisfactory return policy.

<details class="product-policy">
  <summary>Shipping and returns</summary>
  <p>Ships in 1 to 2 business days. Free shipping on orders over $75.</p>
  <p>Free returns within 30 days. <a href="{{ shop.refund_policy.url }}">Read the return policy</a></p>
</details>

Shopify: write your policies under Settings > Policies (Shopify Help Center (opens in a new tab)). In Dawn, a Collapsible row block on the product page can show text or the content of a page (Dawn source (opens in a new tab)), so one shipping and returns page can appear on every product.

WooCommerce: WooCommerce creates a "Refund and Returns Policy" page as a draft (WooCommerce source (opens in a new tab)). It stays unpublished until you edit and publish it.

Do the product images answer shoppers' questions?

Images should show the product from several angles, in scale and in use, because many shoppers judge size and fit from photos rather than from the specifications.

Baymard's testing found that 42% of users try to work out a product's size from its images, while 37% of benchmarked sites don't provide an "in scale" image showing the product next to a person or familiar object. And 23% don't provide a human model image, which matters most for apparel, accessories and cosmetics (Baymard Institute (opens in a new tab)).

Also check that the gallery switches to the right image when a color is chosen, that zoom works on phones, and that each image has alt text describing what that view shows, such as "Linen shirt, back view".

Are reviews easy to find and trust?

Show the average rating and review count near the product title, link it to the full reviews, and reply to negative reviews.

Baymard found that 89% of benchmarked sites don't respond to negative reviews, and 63% don't let shoppers move from one reviewer's photos to the next across reviews (Baymard Institute (opens in a new tab)). Review widgets that load late can also push the page down, so reserve their space.

Shopify: Dawn's Product rating block shows stars from a reviews app, and the theme notes that an app is required (Dawn source (opens in a new tab)).

WooCommerce: under WooCommerce > Settings > Products, the review options include "Enable product reviews", "Show 'verified owner' label on customer reviews", "Reviews can only be left by 'verified owners'" and "Enable star rating on reviews" (WooCommerce source (opens in a new tab)).

Is the add-to-cart button easy to reach and tap on a phone?

On a phone, shoppers should be able to see the price, choose a variant and tap add to cart without hunting, with controls large enough to hit.

In Baymard's 2026 benchmark, 52% of desktop sites and 62% of mobile sites had "mediocre" or worse product page UX, and 57% of sites didn't use buttons for size selection, leaving sizes hidden in drop-downs (Baymard Institute (opens in a new tab)).

Open a product page on a real phone and check:

  • First screen. In a stacked phone layout the gallery often comes first, so a tall image can push the title, price and button below the first screen.
  • Sticky buy bars. If you use one, it must not cover focused elements. W3C's summary of WCAG 2.2 criterion 2.4.11 (Level AA) uses a sticky footer that hides focused items as its example (W3C (opens in a new tab)).
  • Tap targets. WCAG 2.5.8 (Level AA) sets a minimum of 24 by 24 CSS pixels, with exceptions (W3C (opens in a new tab)); Shopify's theme guidance recommends at least 48 by 48 pixels on mobile (Shopify (opens in a new tab)).
  • Sideways scrolling. WCAG 1.4.10 Reflow requires content to work at 320 CSS pixels wide without scrolling in two directions (W3C (opens in a new tab)). Wide size charts and comparison tables are frequent causes.

Do pop-ups get in the way of buying?

Pop-ups that cover the product page on arrival hide the information shoppers came for, so prefer small banners and limit sign-up prompts.

Google's Search Central guidance describes intrusive interstitials and dialogs as elements that obstruct the view of content and recommends small banners instead of full-page overlays (Google Search Central (opens in a new tab)). Shopify notes that pop-up content can also cause layout shifts (Shopify Help Center (opens in a new tab)). Any dialog you keep must be closable with the keyboard; WCAG 2.1.2 No Keyboard Trap (Level A) requires that focus can leave a component using the keyboard alone (W3C (opens in a new tab)).

Can shoppers find your trust and policy pages?

Link refund, shipping, privacy, terms and contact pages from the footer of every page.

In Baymard's 2026 survey, 19% of respondents said they had abandoned a purchase because they didn't trust the site with their card details. Clear policies and contact details are basic signals that a store is legitimate.

Shopify: once you add policies under Settings > Policies, Shopify links them in the checkout footer automatically; to show them in the store, add them to a menu under Content > Menus (Shopify Help Center (opens in a new tab)) or turn on Dawn's Policy links footer setting.

WooCommerce: publish the draft refund page, then add your policy and contact pages to the footer.

Does site search find products and answers?

Search should return the right products for names, misspellings and synonyms, and should also answer questions such as "returns" or "shipping".

Baymard's 2026 search benchmark of 170+ sites and apps rated 46% of desktop, 58% of mobile and 64% of app experiences "mediocre" or worse, and found issues with non-product searches, such as a search for the return policy that returns products, on 66% of sites (Baymard Institute (opens in a new tab), updated April 29, 2026).

Test your store with a best seller's name, a misspelling of it, a category word, and "returns". On Shopify, storefront search returns products, blog posts and pages, with predictive search and typo tolerance on by default, and the Search & Discovery app adds filters and product boosts (Shopify Help Center (opens in a new tab)). A regular page that summarizes shipping and returns can therefore show up for those searches.

Can someone buy using only a keyboard?

Every step from choosing a variant to reaching checkout should work with the keyboard alone, with a visible focus indicator.

WCAG 2.2 requires all functionality to work from a keyboard (2.1.1, Level A), no keyboard traps (2.1.2, Level A), a visible focus indicator (2.4.7, Level AA), and focused items that aren't fully hidden by other content (2.4.11, Level AA) (W3C (opens in a new tab)). These basics are often missing. Baymard's 2021 review of 33 top-grossing sites found that 45% had functionality that couldn't be operated by keyboard and 48% didn't keep the focus indicator visible at all times (Baymard Institute (opens in a new tab)). WebAIM's February 2026 scan found an average of 56.1 detected errors per home page, and 71.0 for sites in its Shopping category (WebAIM (opens in a new tab)).

A five-minute test:

  1. Load a product page and press Tab without touching the mouse.
  2. Check that you can always see where focus is.
  3. Choose a size and color, and change the quantity.
  4. Press add to cart and check that focus moves into the cart drawer and that it closes with the keyboard.
  5. Reach the checkout button.
/* A visible focus style for keyboard users */
:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

A free scan checks many of these items in about a minute. The Conversion Report turns page checks such as price visibility, add to cart on phones, shipping and returns information, pop-ups, footer policy links, search, the keyboard buying path and sideways scrolling into prioritized recommendations. It is based on page checks, not your sales data, and makes no sales guarantee.

Frequently asked questions

What is the most common reason shoppers abandon a purchase?

In Baymard's 2026 survey of 1,083 US adults, the top answer was "just browsing" (42%). Among the other reasons, extra costs such as shipping, tax and fees ranked first at 40%, ahead of slow delivery at 20%.

Will fixing these issues increase my conversion rate?

No one can promise that. The research describes barriers that are common across large samples of sites and shoppers; whether removing them changes your results depends on your products, prices and traffic, so measure before and after each change.

Where should shipping and returns information go on a product page?

Near the price and buy button, as a short summary with a link to the full policy. In Baymard's research, 60% of respondents said they look for return policy information on the product page.

Does the add-to-cart button have to be visible without scrolling on phones?

No rule requires it, but shoppers should see the price and reach the button quickly. A sticky buy bar is one option, as long as it doesn't hide focused elements or other content.

Is accessibility part of conversion?

Yes, in a plain sense: a shopper who can't operate the variant picker or add-to-cart button with a keyboard or screen reader can't buy. WCAG 2.2 Level AA covers these basics.

Sources

All guides