How to Design Ecommerce Product Pages That Convert
A product page has to answer every question a good shop assistant would answer, without being asked. Judge every element on the page against that and most decisions make themselves.
The Job Of A Product Page
A product page has to answer every question a good shop assistant would answer, without being asked. That is the test. Every block below applies it to a different part of the page.
The comparison is exact rather than decorative. In a physical shop a customer picks the thing up, turns it over, checks the underside, looks at how it is made, asks two questions and decides. Online they can do none of that. The page is the entire substitute for all of it.
A shop assistant is the right benchmark rather than simply being informative, because a good one does three specific things. They know which questions get asked, so they answer them before anybody has to ask. They volunteer the awkward fact, because a return costs more than a lost sale. And they can tell the difference between somebody who has decided and somebody who has not.
Applied as a design test it becomes usefully ruthless. Every element on a product page either answers a question a shopper actually has or it is decoration. Badges, animations, review counts with no reviews behind them and lifestyle photography showing nothing about the product all fail on that basis, however good they look in a design review.
Images
How many images should a product have is the wrong question and it is the one everybody asks. The right question is which of the things a customer would do holding this item can they not do here, then photograph those.
Scale. Either something familiar beside it or the item in a setting that conveys size. Dimensions in millimetres are correct and almost nobody can picture them.
Texture and finish. Close enough to see what the surface actually is, since a photograph taken from two metres makes plastic and painted metal identical.
What is included. Everything in the box, laid out. This single image prevents more complaints than any paragraph of description.
The item in use. Doing its job, in a real setting, at a realistic size.
The detail somebody would pick it up to check. The seam, the hinge, the connector, the underside, the mechanism. Whatever a careful buyer would inspect is the shot most shops do not take.
Every variant you sell. If it comes in green, there is a photograph of the green one.
One further point that matters more than any individual image. Consistency across a catalogue beats brilliance on one product, because a shopper comparing four items is reading the differences between the photographs. Inconsistent backgrounds, crops and lighting make that comparison impossible.
The Information That Actually Decides It
Seven things settle most purchases. Manufacturer copy reliably contains none of them.
Dimensions and weight. Because the real questions are whether it will fit, whether one person can carry it and whether it will get through the door.
Materials and construction. What it is actually made of, in words a buyer uses.
Compatibility. Whether it works with what the customer already owns, which is the entire decision for anything technical.
What is in the box. Including what is not, since batteries, fixings and cables absent from a delivery generate more annoyance than their cost warrants.
Care and maintenance. What owning it involves.
Fit specifics. Not a generic chart. Whether this item runs small.
The question your customers keep asking. You already know what it is.
Why manufacturer copy fails. It was written to persuade a retailer to stock the product rather than to help a buyer decide, so it is persuasion rather than information. Every competitor stocking that item has the identical words. And it systematically omits anything awkward, because omitting awkward things is what marketing copy is for.
The awkward facts are the valuable ones. A page stating that something is heavier than it looks loses a sale that was going to be lost anyway, at the point where losing it costs nothing, rather than after picking, packing, delivery and a return.
Variants And Options
Where a product comes in sizes, colours or configurations, the shopper needs to see what is available and what is not without hunting for it.
What has to be true. Unavailable combinations are visibly unavailable rather than selectable and then rejected. Choosing a variant updates the image, the price and the stock position together. What ends up in the basket is unmistakably the combination that was chosen.
The failure everybody has experienced. Select a size. Select a colour. Discover the combination does not exist. Start again, guessing. Repeat until something is available or until you leave. It is a small thing that produces disproportionate irritation, because the shopper feels the page misled them.
The subtler requirement. Where variants differ in more than price, the page has to reflect it. A longer version weighs more, a larger size may have different care instructions, a different finish may not be suitable outdoors. Shops routinely update the price and the photograph while leaving specifications describing whichever variant was loaded first, which is worse than saying nothing, since it is wrong rather than absent.
Applied to the shop assistant test: an assistant asked for a size would not offer one that does not exist, then say so only after the customer had committed to it.
Stock And Delivery Clarity
When will it arrive, plus how much does that cost. These are the last questions before a purchase. They belong on the product page rather than three steps into a checkout.
Delivery. Stated as a date rather than a duration where possible. Three to five working days requires a shopper to consult a calendar and count, while arriving by Thursday does not. The cost belongs beside it, because a delivery charge discovered later reads as concealment.
Stock. Accurate and specific. In stock, low stock where genuinely low, on backorder with an expected date, else unavailable with either a date or an alternative. Vagueness here is worse than bad news, since a shopper who cannot tell whether something is available assumes the worst and leaves.
Out of stock pages. A page for an unavailable product is an opportunity treated as a dead end almost everywhere. Somebody arrived wanting this specific thing, which makes them among the most valuable visitors on the site. Offer to notify them, show when it returns or point to the closest alternative. Showing nothing wastes a visit somebody paid to acquire.
In the work we do, unanswered delivery questions are among the most common reasons a shopper gets to this point and stops. It is also among the cheapest to fix, since the information already exists inside the business.
Customer Reviews
Reviews work by being believable. Everything about presenting them follows from that rather than from wanting the average to look high.
What makes them credible. Variation in length and phrasing, since real people write differently. Specific detail nobody would invent. Dates. An indication that the reviewer bought the item. Some reviews that are less than perfect. And responses from the business to the critical ones, which does more for trust than the positive reviews do.
How to present them. Show the distribution rather than only an average, since a distribution is falsifiable and an average alone is not. Let somebody read the recent ones. Where reviews relate to a particular variant, show which.
The counterintuitive part. Six believable reviews including a three star one outperform forty identical five star ones, because uniformity is precisely what makes a set of reviews read as fabricated. A shop with perfect reviews is making a claim shoppers have learned to distrust.
The rule that is not negotiable. Never mark up ratings that were not genuinely given. Structured data is an assertion about reality stated in a form machines act on, so a false one is a misrepresentation rather than an optimisation. That applies equally to savings against prices never charged and to delivery promises that are not real.
Related And Alternative Products
Most shops treat these as one feature. They are opposites. Confusing them costs sales at the worst possible moment.
An alternative is something a shopper might buy instead of this. An accessory is something they would buy as well as this.
Which means they belong in different places. Alternatives are useful while somebody is still choosing, so they sit higher on the page and phrase themselves as comparisons. Accessories are useful once the decision is made, so they sit lower or appear after the item is in the basket.
Getting that backwards is common and expensive. A row of similar products beside the buy button invites reconsideration from somebody who had already decided, which is the one moment a shop should be helping them finish rather than reopening the question.
Doing it usefully. The relationships that work reflect how things are actually used together, which usually means somebody in the business deciding them rather than a system inferring them from behaviour. Customers also viewed produces noise, because viewing is not choosing and a shopper comparing four items generates four relationships that mean nothing.
A useful accessory suggestion answers a question the shopper had not yet reached, which is what a good assistant does when they mention that the model you are buying needs a particular fitting.
Structured Data On Product Pages
Structured data describes a product in a form machines read directly rather than inferring. On a shop it is genuinely valuable. It also carries an obligation most discussions of it skip.
What can legitimately be described. Price and currency. Availability. Brand and product identifiers. Genuine reviews and the rating they actually produced. Delivery and returns information where it accurately reflects what you offer.
What must never be invented. A rating nobody gave. A number of reviews you do not have. A saving against a price never charged. Availability that is not accurate. A delivery promise you do not keep.
Why this is not an optimisation question. Structured data is a statement about reality made deliberately, in a form designed to be acted on without a human checking it. A false statement there is a misrepresentation to customers rather than a clever technique. It is also the most checkable thing on your site, since anybody can compare the assertion with the page.
The maintenance point. Accuracy is not a one off. A marked up price that no longer matches is a wrong assertion whether or not anybody intended it. So is availability describing stock you sold last month. Structured data has to change when the shop changes.
What to mark up and how it is implemented belongs in our schema markup guides rather than being rebuilt here.
On A Phone
On a wide screen the image, price, variants and delivery information sit beside each other and a shopper takes them in together. In one column they arrive in sequence, so the order becomes a decision somebody has to make deliberately.
An order that works for most shops. The main image. The product name. The price. Variant selection. Stock and delivery. The button. Then the information that decides it, the full description, reviews and finally anything related.
Why that order. Everything above the button answers a question that stops somebody buying. Everything below supports a decision already forming. The line sits at the point where a shopper who has decided can act without scrolling past anything else.
What falls below the fold. Almost everything, which is the point of thinking about the order at all. On a phone a shopper sees roughly the image and the name before scrolling, so those two are carrying the whole first impression.
The button. It has to be reachable at any point rather than only at its original position, since somebody who has scrolled through specifications and reviews has become more likely to buy and should not have to travel back up to do it.
Common Mistakes
Each of these fails the shop assistant test in a specific way.
Manufacturer copy pasted in. An assistant reciting the packaging while the customer asks whether it will fit.
One image. Refusing to let somebody turn the item over.
Hidden delivery cost. Waiting until the till to mention the charge, which nobody would do in person and which every shop doing it online would recognise as rude if they did.
Fabricated urgency. Countdown timers that reset, stock warnings that never change and claims about how many people are viewing. Customers recognise these more often than the shops using them assume. The cost is credibility on every other claim the page makes.
Reviews that all read the same. Covered in block six. Worth repeating, because it is the commonest self inflicted trust problem on a product page.
The pattern across all five is a page written for the business rather than for the person deciding. Where these pages sit in the wider structure is covered in how to design ecommerce category pages. How they fit the whole picture is in how website design affects ecommerce conversion rates.
Pages that answer
before being asked.
We design product templates around the questions your customers actually ask, which usually means finding out what they ask before drawing anything. We never mark up a rating that was not given, on any project.
What a build covers:
Ongoing management afterwards sits inside our fixed monthly fee. Build work is quoted per project.
Twenty guides.
One subject.
This page covers product pages. The rest of the series covers category pages, where conversion is lost, what a build costs and why the search ceiling is set during the build.
