Designing the product detail page (PDP): rules and an example

In short

On the product page, the shopper is looking for answers. Does it suit me, is my size available, what will it cost to my door and when will it arrive? Anyone who can’t find the answer switches to another tab.

In the Baymard Institute’s benchmark, updated in March 2026, the share of desktop sites with a “good” or “decent” product page is 48%. For mobile sites it is 38%. On most sites, then, this page is still mediocre or worse.

This page covers only the product detail page pattern. I summarised every page type from the home page to checkout in the e-commerce UX guide. Here I open the product page section rule by rule.

• Make the image zoomable and show the product next to something of known size.
• Show the size as buttons with availability, not in a drop-down.
• When a colour is chosen, the main image switches to that colour.
• Put the estimated total with shipping next to the price.
• Give the estimated delivery date, not the shipping time.
• When an item is added to the cart, give a confirmation that can’t be missed.
• Keep the add-to-cart button at the bottom of the screen on phones.

The anatomy of a product page

On desktop, the images sit on the left and the buy box on the right. On a phone the same parts stack, and the add-to-cart button stays fixed to the bottom of the screen.

The order matters. Price, total, options, delivery and button sit in one block because that is where the decision happens. The spec sheet and reviews support the decision, so they can sit below.

If you want to sketch this outline on paper, the wireframe page has a product page example.

Images

Katie Sherwin’s 2019 NN/g guidelines count the enlarged image among the things a product page must have. Zooming and panning within the image are on the “nice to have” list. According to the guidelines, a single view rarely answers shoppers’ questions.

Size is hard to read from an image. In Baymard’s testing, 42% of users tried to work out a product’s size from its images. Even so, 37% of sites offer no image that shows the product next to something of known size.

For clothing, the human body gives the scale. According to Baymard, 23% of sites don’t show clothing, accessories or cosmetics on a model.

I also recommend writing the model’s height and the size they are wearing under the image. That way the user gets the answer without opening the size chart. This is my suggestion, not a research finding.

Choosing a colour changes the main image. If the user picks Mint and still sees the yellow shirt, they don’t know whether their choice took effect. That breaks Nielsen’s first heuristic, visibility of system status.

Choosing variants: size and colour

Show the size as buttons. According to Baymard, 57% of sites don’t use buttons for size selection.

In Baymard’s testing, the drop-down caused problems because the sizes in it were hidden by default. A menu also makes it hard to see which size is in stock.

Baymard’s guideline on non-colour variation selectors also describes the consequence. Some users miss size options that aren’t immediately and directly visible. They then believe there is no suitable variant, or lose time checking.

According to Sherwin, availability must be clearly visible, especially when it changes by colour or size. The user shouldn’t find out only after adding to the cart that the product is sold out.

So I don’t hide a sold-out size; I show it disabled. I cross it out and write “Sold out” under it. If it’s available in another colour, I say so directly below.

I don’t rely on a faded colour alone, because colour alone doesn’t describe a state. A dashed border, struck-through text and the words “Sold out” work together.

Size buttons are chosen with a finger, so their size matters too. WCAG 2.2 success criterion 2.5.8 (AA) requires targets to be at least 24 × 24 CSS pixels or to have enough spacing. I use larger ones.

Price and total cost

Sherwin’s guidelines call for showing the price with product-specific extra fees. One shopper in the study factored free shipping on the product page into her comparison of sites. One of the sites only said that shipping was free after the item was added to the cart.

According to Baymard, 67% of sites don’t show an estimate of the total order cost next to the buy box. Baymard recommends showing the lowest total with the lowest shipping cost by default. If shipping and taxes can be high, Baymard also recommends a calculator for them.

The cart abandonment data shows why. Baymard’s list, updated on September 22, 2025, is based on US shoppers and leaves out those who were “just browsing”. 40% of these shoppers abandoned checkout because extra costs were too high; 12% said they couldn’t see or calculate the total up front.

For products sold in several sizes or quantities, also show the unit price. According to Baymard, 81% of sites don’t show a unit price. Anyone comparing a 25 fl oz bottle with a 50 fl oz one shouldn’t have to open a calculator.

A fee that only appears at the last step feels to users like a hidden cost. I describe this in the dark patterns guide. The rules for the payment step are in the checkout pattern.

Availability and delivery date

Don’t write “2–4 business days”; write a date. According to a 2023 Baymard article by Iva Olah, 41% of sites don’t show an estimated delivery date.

Participants who saw only the shipping time paused and worked out the date themselves. That calculation sometimes led to hesitation and sometimes to abandonment.

Olah mainly recommends showing the delivery date in the payment step next to the price of each shipping option. Where possible, it should also appear on the product page.

Date ranges were understood more easily than duration ranges such as “3–7 business days”. But when the range grew wider than 5 to 7 days, some participants hesitated.

When you calculate it, include the order cutoff and the processing time. Olah warns that carriers’ systems assume the package ships the same day unless told otherwise.

Participants read the displayed date like a delivery guarantee. A date that turns out wrong erodes trust over time. Keep the estimate current during peak periods and holidays.

Return information belongs here too. According to Baymard, 60% of users look for return information on the product page. Yet 44% of sites neither show the return policy in the product’s main content nor link to it.

The add-to-cart confirmation

The add-to-cart confirmation must be clear enough that it can’t be missed. In Sherwin’s testing, users who didn’t get enough feedback added a product several times and found duplicates in the cart. Some also believed they had added a product that wasn’t in the cart at all.

Amy Schade of NN/g wrote a warning on the same topic in 2014. A one-line message or the changed number on the cart icon is easy to overlook. Anyone who misses it goes to the cart to check or adds the product again.

Sherwin accepts both approaches: a persistent message or a confirmation screen. I prefer a confirmation box that stays on the product page. It shows the product, colour, size, cart total and two open paths: “Go to cart” and “Keep shopping”.

If the button is pressed with no size chosen, show the error message directly under the size group and move the focus there. How to write the message is on the error messages page.

Spec sheet and reviews

Spec sheet

Sherwin calls for a description that is complete but short and puts the important things first, because readers skim. Unfamiliar terms are explained. For data-heavy attributes, a comparison table is often the best approach, according to Sherwin.

In Baymard’s review of spec sheets on 344 sites, 64% of sites are mediocre or worse in this area. On 30%, the inconsistency of labels, structure and units between products of the same type is severe.

My own rule is simple: every product in the same category shows the same rows in the same order with the same unit. If one shirt says “Material” and another says “Fabric”, the user can’t easily compare the two pages.

Reviews

Sherwin recommends a summary for reviews and a clear separation of positive and negative. Details such as the reviewer’s age or how they use the product show whether the review is relevant to the reader. The site verifying reviews also builds trust.

According to Baymard, 89% of sites don’t respond to negative reviews. Baymard recommends setting the store’s reply visually apart from the reviews so it stands out.

63% of sites don’t let users browse between the photos in reviews. Baymard recommends that users can move between photos and their reviews with arrows or a swipe.

The sticky add-to-cart button on phones

On a phone, the product image often fills the whole first screen. When the user reads the description or reviews, the add-to-cart button is far above the screen. Fixing the button to the bottom of the screen saves the decided shopper from scrolling back.

I haven’t opened and read an independent study on this, so I won’t give you a rate. My recommendation is based on my own observation and is a hypothesis to test. On your own site, measure it with an A/B test.

When I build a sticky button, I watch for the following:

• The bar is slim: price, chosen size and button are enough.
• If it is pressed with no size, the focus jumps to the size group and the reason is shown.
• The bar doesn’t fully hide the keyboard focus. WCAG 2.2 success criterion 2.4.11 (AA) doesn’t allow the focused element to be fully hidden by a sticky header or bottom bar. scroll-padding in CSS is a simple fix.
• The button is full width. A large target is easier to hit, as Fitts’s law describes.
• The confirmation box also opens in the bar. Wherever the user is on the page, they see the confirmation there.

Example: good and bad product page

The product page below is made up. Try the good version first: choose a colour and see how the image and the sold-out sizes change. Then choose a size and add the shirt to the cart.

Then press “Bad” and do the same. In this version the size moves into a drop-down and the shipping costs disappear. The add-to-cart confirmation only shows up in the counter at the top right.

If you’re on a phone, scroll down in the good version. The add-to-cart button stays at the bottom of the screen.

My note

The finding I write most often in product page audits: availability is hidden in the size menu. The user picks their size, presses the button and only then sees “out of stock”. The fix is usually a small job.

In second place come shipping costs. Teams put the free shipping threshold in the banner on the home page and forget it on the product page. I recommend putting the estimated total with shipping directly under the price.

When I look at a product page, I pick up the phone first. A buy box that looks tidy on desktop can disappear under the image and description on a phone. If you want to see what’s broken before a redesign, that is exactly what the UX audit is for.