Good e-commerce product page design has one job: to give a shopper enough confidence to press Add to cart. Few people read a product page from top to bottom. They scan for answers to a handful of questions, and if one is missing, vague or buried in a tab they never open, they look for it elsewhere, often on another shop selling the same thing.
So the design is less about layout than about sequence: which question each element answers, and whether the answer is visible when the shopper needs it. This guide works through each question, then layout, phones, accessibility and speed, and ends with a checklist of product page best practices to copy.
The short answer
A good product page answers six questions without making the shopper dig: what is it, will it suit me, what will it cost in total, when will it arrive, can I send it back, and can I trust this shop? In priority order, that means:
- Product name and a gallery showing the real product from every angle that matters.
- The price, with delivery, taxes and fees included or clearly stated.
- A variant picker that shows every option and marks unavailable ones.
- One clear Add to cart button.
- Delivery and returns in a sentence each, right beside that button.
- Scannable specifications, plus sizing, fit or compatibility help.
- Honest reviews, including the critical ones.
- The full description, product FAQs and related products.
On a desktop, items 1 to 5 sit at the top: the gallery beside a “buy box” holding the rest. On a phone, they stack in this order.
Six questions every product page must answer
“What is it?”: galleries, video and a one-line summary
The gallery does more selling than any paragraph, so plan the shots rather than using whatever the supplier sent: front, back and side; a close-up of the material or detail people would touch; the product in use, so shoppers can judge its scale; what’s in the box; and one image per colour, shown when that colour is picked.
Video earns its place where movement matters, such as how a fabric drapes; keep it short, captioned and silent until played. Where size and space decide the sale, a 3D viewer can help; our guide to virtual tours and 3D viewers covers when one is worth its extra weight. Under the name, one plain sentence saying what the product is and who it’s for beats a paragraph of adjectives.
“Will it suit me?”: specifications, fit and descriptions
A shopper who can’t answer this either leaves or guesses, and a wrong guess tends to come back as a return.
Specifications. Use a table, not a paragraph, with rows in the same order on every product, so someone comparing two items finds each line in the same place.
Size and fit. A size chart only helps if people know how to measure themselves. Show how, say whether it describes the body or the garment, and add fit notes you actually know, such as “runs small” when your returns data says so.
Compatibility. For parts and accessories, a “fits these models” list or a model-number checker answers “will it fit mine?” directly.
Product descriptions. Write for the shopper’s doubts, not the supplier’s praise: what the product does for the buyer, then what separates it from the similar products beside it. Original copy also helps in search, as our guide to e-commerce SEO explains.
“What will it cost in total?”: all-in pricing
The price shoppers see should be close to the price they pay. If delivery costs extra, show the cost or the free-delivery threshold beside the price, not at checkout. Baymard Institute’s long-running checkout research consistently ranks extra costs (delivery, taxes, fees) as a leading reason for abandoned checkouts, which is why checkout optimisation starts on the product page.
Show taxes as your market expects, in the shopper’s currency if you sell internationally. A “was” price must be genuine, and some markets regulate it: in the EU, for example, an announced price reduction generally has to show the lowest price the shop charged in at least the 30 days before it.
“When will it arrive?” and “Can I send it back?”
Answer both beneath Add to cart, a sentence each: that is where the last doubt surfaces.
Delivery. Give an estimated date rather than “3–5 working days”, which leaves the shopper to do the maths. Show a dispatch cut-off only if it’s real: a countdown that resets on every visit is a dark pattern.
Returns. Say how long people have, who pays for return postage and how the refund arrives. Open the full policy in a panel, so reading it doesn’t lose their place or their selected size.
“Can I trust this shop?”: honest reviews and visible details
Product reviews only persuade when they look genuine. Show the rating distribution, let people sort by newest and filter by rating, and reply to critical reviews rather than hiding them. A strong average with a few honest complaints is more believable than a wall of five stars. Regulators in several markets have tightened the rules on fake and suppressed reviews, so publishing only the good ones can be a legal risk as well as a credibility one.
Around the buy box, add a star summary that links to the reviews, the payment methods you genuinely accept and a visible way to ask a question. Our guide to website credibility covers the wider trust signals.
Product page design on desktop and on a phone
| Element | Desktop | Phone |
|---|---|---|
| Gallery | Left column, main image with thumbnails | Full width, swipeable, with a counter |
| Name, rating, price | Top of the buy box | Directly under the gallery |
| Variant picker | Buy box, above the button | Under the price, as buttons or a bottom sheet |
| Add to cart | One primary button | In the flow, then a sticky bar |
| Delivery and returns | Beneath the button | Beneath the button, one line each |
| Specs, description, reviews | Stacked sections below | Accordions, review summary open |
Designing for the phone first forces the priority decisions early; our comparison of mobile-first and responsive design explains the approach. On desktop, stacked sections with in-page links beat horizontal tabs, which are easy to miss.
Designing product pages for phones
A sticky Add to cart that helps rather than hides
- Show it once the main button scrolls out of view, carrying the price and selected variant.
- If no size is chosen, tapping it should open the size picker, not throw an error.
- Keep it slim: with a chat bubble and a cookie banner, it can swallow much of a small screen.
- Leave room for the phone’s home indicator, and never let the bar cover the element with keyboard focus: hiding it entirely fails WCAG 2.2 criterion 2.4.11, Focus Not Obscured (Minimum).
Galleries that obviously swipe
A gallery that looks like one static image doesn’t get swiped. Let the next image peek in, show a counter (“2 / 7”), and add arrows or thumbnails: WCAG’s Pointer Gestures criterion (2.5.1) requires an alternative to swiping that works with simple taps. Tapping an image should open a full-screen view with pinch-to-zoom and zoom buttons (pinching needs a tap alternative too), and the gallery shouldn’t capture vertical scrolling.
Thumb-reachable controls and WCAG 2.2 tap targets
Size buttons, quantity steppers and accordion headers are the controls shoppers tap most, and often the smallest on the page. WCAG 2.2’s Target Size (Minimum) criterion (2.5.8, level AA) sets a floor of 24 by 24 CSS pixels, unless smaller targets have enough space around them. For these controls, aim for 44 by 44: the level AAA figure (criterion 2.5.5) and Apple’s default control size for iPhone. Leave space between neighbouring size buttons, and keep key actions within easy thumb reach.
A real-device testing routine
Browser emulation shows the layout, not how a page feels in one hand on a patchy connection. Before launch and after any template change:
- Use a recent iPhone and a mid-range Android phone, on mobile data.
- Open a product page from a search result in a private window, as a new visitor would.
- One-handed, pick a colour and size, open the size guide and add to cart. Note every stretch and mis-tap.
- Try to choose a sold-out option. Does the page say so clearly?
- Increase the phone’s text size and repeat step 3.
- Turn on VoiceOver or TalkBack and complete the same purchase by ear.
An accessibility pass on variant selectors and galleries
Both are usually custom-built, which is where accessibility tends to break. Our WCAG 2.2 explainer covers the wider standard.
Variant selectors
Galleries and video
Speed and search: the parts shoppers never see
Load the main image first. The main product image is often the page’s Largest Contentful Paint (LCP) element, so it decides whether the page meets Google’s “good” threshold of 2.5 seconds. Don’t lazy-load it, serve it in a modern format at the right size, and set dimensions on every image; our guide to image optimisation covers the details. Then check what each review, chat and recommendation script adds to loading time and to how fast a tap on a size responds (Interaction to Next Paint, good at 200 milliseconds or less).
Help search engines read the page. Give each product one clear URL, decide deliberately whether variants share it, and write a unique title. Product structured data with price, availability and genuine review data can make a product eligible (not guaranteed) for richer results in Google; our guide to schema markup explains how.
The product page checklist
Copy this into your next product page review:
What to do next
A product page is where strategy, content, design, development and performance meet on one screen, and a weakness in any of them shows up as hesitation at the button. Start with the questions your pages can’t yet answer, then refine the layout. For how product pages fit with categories, search and navigation, read our guide to e-commerce website design.
If you’d like an outside view before changing anything, a free website audit shows how your key pages load and behave on a phone, how visible they are in Google and what to fix first.