Product page best practices: how to build a page that answers every buying question

Every element on a product page should answer one of these questions. If an element answers none of them, it is decoration; if a question has no answer, it is a lost sale. In Nielsen Norman Group's e-commerce studies, a fifth of failed purchases came from incomplete or unclear product information. These were shoppers who wanted to buy and could not decide.

On desktop, the first screen should hold the gallery on one side and the buy box on the other. On a phone, the gallery comes first and the buy box directly beneath it. The buy box contains, in this order:

Baymard's testing found 56% of users began by exploring product images, before reading the title or description, and 42% tried to judge a product's size from the images alone. Yet 37% of sites have no in-scale image and 23% show apparel and accessories without a human model.

Make the first image a clean, recognisable view of the product, then cover angles, details, scale and use. Show thumbnails so shoppers can see how many images exist, and allow zoom on images with enough resolution to show texture. Video and 360° views belong in the gallery as a supplement, not the first item. Our product photography guide has the full shot list.

Baymard found 57% of sites do not use buttons for size selection. Dropdowns hide the choice and hide which sizes are out of stock until the shopper has opened them. Use buttons or swatches, mark unavailable options, and offer a back-in-stock alert for them.

When a shopper picks a colour, switch the gallery to images of that colour. A blue sofa shown in grey is a return waiting to happen.

Show what the shopper will actually pay. Baymard found 67% of sites do not show the total order cost near the buy section and 81% do not show a price per unit for multi-quantity products. Both force the shopper to work it out, or to leave and compare elsewhere.

If you sell in the EU and show a discount, the reference price must be the lowest price you charged in the 30 days before the reduction (Omnibus Directive). Display it as “Lowest price in the last 30 days: €X”, not as an invented “was” price.

Below the top section, order content from what helps the shopper decide to what helps them double-check: three to five key features first, then the description, then a specifications table, then what's in the box and care instructions, then reviews and questions. Keep the same specifications in the same order across similar products, so shoppers can compare. Our guide to product descriptions covers how to write each part.

Avoid hiding essential information in collapsed tabs on desktop. Accordions are fine on phones, but give them clear labels and open the most important one by default.

Show the rating summary at the top and the reviews further down, with the distribution of ratings, filters for things like size or use, and reviewer photos. Baymard found 63% of sites make it hard to browse reviewer-submitted images and 89% do not respond to negative reviews. How to collect and present reviews well is covered in our trust signals guide.

Add Product structured data to every product page, including price, availability, shipping details and the return policy. Google uses it for merchant listing experiences, which can show price, availability, ratings, shipping and returns directly in results. Answer engines read the same facts, so a product page with complete, consistent data is easier for them to cite correctly.

Keep the markup and the visible page identical. Markup that shows a price or rating the page does not is a policy violation, and it is the quickest way to lose the enhancements.