The product page is where a shopper decides whether to buy, and most stores make that decision harder than it needs to be. This guide is for Shopify founders and ecommerce managers who want to know what usability research actually says a product page needs, and how to apply it in a Shopify theme.
Key takeaways
- Baymard Institute's 2026 benchmark rates 52% of desktop and 62% of mobile sites "mediocre or worse" for product page UX. No site scored "perfect."
- Images do the heavy lifting. Show scale, show the product on a person when it's worn, and let shoppers browse customer photos.
- Answer cost questions on the page: shipping, returns and, where relevant, unit price.
- Use buttons for sizes and variants, not dropdowns.
- Reply to negative reviews. Almost nobody does, and shoppers read them.
What the research says
Baymard's product page benchmark (updated March 2026) is based on more than 30,000 manually reviewed usability scores across 155+ US and European ecommerce sites. A few findings stand out because they're common and fixable in a Shopify theme:
| Finding | Share of sites |
|---|---|
| Don't provide an "In Scale" image showing product size | 37% |
| Don't show a human model image for wearable products | 23% |
| Don't use buttons for size selection | 57% |
| Don't show price per unit for multi-quantity products | 81% |
| Don't show a total order cost estimate near the buy section | 67% |
| Don't show or link to the return policy from main product content | 44% |
| Don't respond to negative reviews | 89% |
| Don't let users browse reviewer images across reviews | 63% |
Source: Baymard Institute, Product Page UX 2026.
The same benchmark notes that 42% of users try to judge a product's size from its images. If your images don't help, shoppers guess, and guessing leads to either abandonment or returns.
The anatomy of a strong Shopify product page
Above the fold
On a phone, the first screen should hold:
- The main product image (or gallery), large enough to see detail.
- The product title and price, including any sale price shown clearly.
- Review summary (stars and count), linked to the reviews section.
- Variant selectors, as buttons or swatches.
- The add-to-cart button, plus accelerated checkout buttons if you use them.
Everything else can sit below. Don't push the buy button down with banners, trust badges or long promo text.
The image gallery
In Baymard's testing, 56% of users began by exploring the product images when they landed on a product page. Treat it as the core of the page, not decoration.
A solid gallery for most products includes:
- A clean main shot on a neutral background.
- An in-scale image showing the product next to a hand, a person or a familiar object.
- A lifestyle or on-model image for anything worn, carried or applied.
- Detail shots of texture, stitching, ports, labels or ingredients.
- A "what's included" image when accessories or parts come in the box.
- Video where motion matters (fit, how it works, how it pours).
In Shopify, use variant images so selecting a color switches the gallery to that color. Make sure zoom works on mobile with a pinch or tap, and that image files are sized correctly. Shopify's theme guidance says to use image_url and image_tag with srcset and sizes, always include width and height to prevent layout shift, and never lazy-load the main (LCP) image. More on that in the site speed guide.
Variant selection
Use buttons or swatches, not dropdowns. Buttons show every option at once, make out-of-stock options visible, and are easier to tap. Many current Shopify themes, including Shopify's free themes, offer button or swatch pickers as a setting in the theme editor; check yours before paying for an app.
Also:
- Show which options are sold out (crossed out or greyed), and offer a back-in-stock signup if you have one.
- Update the price, image and availability as soon as a variant is chosen.
- Add a size guide link next to the size selector, not at the bottom of the page.
Price and cost clarity
Price is more than the number on the page. Shoppers want to know what they'll pay in total.
- If you sell multipacks or different volumes, show a unit price. Shopify supports unit prices for this.
- Show shipping cost or a free-shipping threshold near the buy button. Baymard found 64% of users look for shipping costs on the product page.
- If you offer installments through Shop Pay Installments or another provider, the message should be short and accurate.
Shipping, returns and delivery dates
Put a short delivery estimate and a returns line right under the add-to-cart button, with a link to the full policy. Keep the wording plain: "Free returns within 30 days" is better than a legal paragraph, as long as it matches your actual policy.
Description and specifications
Write for the questions people ask before buying. A good structure:
- One or two sentences on what it is and who it's for.
- Key benefits as short bullets.
- Specifications in a scannable table: dimensions, materials, weight, compatibility, care.
- What's in the box.
Use Shopify metafields for specifications so they stay consistent across products and can feed filters on collection pages. See collection navigation and search for how that connects.
Reviews
Reviews are evidence. Make them easy to scan and honest:
- Show the rating distribution, not just the average.
- Let shoppers filter or sort by rating and by relevant attributes (size bought, fit).
- Let shoppers browse all customer photos in one place.
- Reply to negative reviews with a calm, specific answer. It tells future buyers how you handle problems.
Review content can also support structured data for search results. See product schema on Shopify.
Product page audit checklist
Use this on your top 10 products by revenue:
- Is the add-to-cart button visible on the first mobile screen?
- Are variant selectors buttons or swatches, with sold-out options clearly marked?
- Does the gallery include a scale image and, for wearables, an on-model image?
- Do variant images switch when a variant is selected?
- Is shipping cost or a free-shipping threshold visible near the buy button?
- Is there a delivery estimate based on real fulfillment times?
- Is the returns policy linked from the buy section?
- Are specifications in a table, sourced from metafields?
- Is unit pricing shown where quantities vary?
- Are negative reviews answered?
- Does the main image load quickly and without layout shift?
- Do accelerated checkout buttons show and work on mobile?
Watch out: Many product page apps (badges, timers, upsell widgets, review carousels) inject their own scripts and layout. Each one can slow the page and push the buy button down. Audit them as a group, not one by one.
Common Shopify-specific pitfalls
- Too many variants in one product. Even when the platform allows it, huge variant sets make selectors hard to use. Consider splitting products into separate listings, or, on Shopify Plus, the Combined Listings app, which links separate products (for example, one per color) into a single shopping experience on compatible themes.
- Hidden descriptions behind tabs on mobile. Tabs or accordions are fine, but key details (size, materials, delivery) should be visible without extra taps.
- Sticky add-to-cart bars that cover content. Useful on long pages, but test that they don't overlap cookie banners, chat widgets or the keyboard.
- Upsells above the buy button. Cross-sells belong below the main purchase area or in the cart.
FAQ
How many product images should a Shopify product page have?
There's no fixed number. Cover the main view, scale, detail, use or on-model, and what's included. For apparel, that often means more images than for a simple accessory.
Should I use dropdowns or buttons for variants?
Buttons or swatches. Baymard found 57% of sites still don't use buttons for size selection. Buttons show all options at once and make availability obvious.
Where should shipping and returns info go?
Directly under or near the add-to-cart button, as one or two short lines with links to the full policies.
Do product videos help conversion?
They help when motion explains something photos can't, like fit, texture or how a product works. Keep them short, muted by default, and make sure they don't slow the page.
Should I show negative reviews?
Yes. Hiding them reduces trust. Reply to them so future shoppers see how you handle problems.
Next steps
Start with your top-selling products. Fix the gallery, switch to button selectors, and add shipping, delivery and returns lines near the buy button. Then measure add-to-cart rate on those products for a few weeks. If you'd like an outside review of your product templates, book a Shopify consultation.