The Shopify product page that sells: 12 elements, in the order shoppers see them
A Shopify product page has one job: answer five questions before the shopper leaves — what is this, is it for me, what will it cost me in total, can I trust this store, and when will it arrive. Twelve elements do that work, six above the fold and six below, and each one answers a specific doubt.
This guide walks through the page in the order a shopper experiences it. For each element: what it is, why it matters, and the mistake we see most. Then the mobile rules, and a safe way to change the page without breaking your theme.
What does a Shopify product page have to do?
Think of the product page as a short conversation with a stranger. The shopper arrives from an ad or a search, knowing little about you. Every question they can't answer in a few seconds is a reason to go back and try the next tab.
- What is this? A clear name and images that show the product from the angles a buyer would want.
- Is it for me? Variants, sizing, benefits and who it is meant for.
- What will it really cost? Price, shipping and any extras, before checkout.
- Can I trust this store? Reviews, a returns promise, recognisable payment marks.
- When does it arrive? A delivery estimate where the decision happens.
Most pages are weaker at this than store owners assume. In Baymard Institute's product page benchmark (updated March 2026) of more than 155 US and European sites, 52% of desktop experiences rated "mediocre or worse", and so did 62% of mobile web experiences. If large retailers miss the basics, a small store certainly can.
Want to see which of the twelve your page is missing? Run the audit on your store →
Above the fold: elements 1–6
1. Image gallery
Shoppers can't touch the product, so the images do the work. Show it from several angles, in use, and — where size matters — in scale next to something familiar. Baymard found that 37% of sites lacked an in-scale image, while 42% of users try to judge size from images. The classic mistake: a single glossy shot on white, and nothing showing real size or texture.
2. Title, price and review stars
Say what the product is in plain words, show the price in a stable spot, and put a star rating with a review count right beside them. Together they answer "what is this" and "do other people like it" in one glance. The mistake is a clever product name that doesn't say what the thing is, or stars buried far below the button.
3. Variant selector
Size and colour choices should be visible, tappable and obvious about stock. Baymard reports that 57% of sites don't use button-style size selectors. A dropdown hides the options and adds a tap. The mistake is making the shopper discover that their size is unavailable only after choosing it.
4. Add to cart button
One clear primary action, high contrast, with a label that says what happens. It should be the most visible element in the buy column. The usual error is competing buttons (wishlist, "buy now", "notify me") that make the main one look optional.
5. Delivery and returns line
This is where the cost and arrival questions get answered: shipping cost or threshold, a delivery estimate, and a one-line return promise. According to Baymard, 67% of sites don't show an estimated total near the buy section, and 44% don't link or display the return policy on the product page, even though 60% of respondents in its survey look for it there. The mistake is leaving all of this for checkout.
6. Trust icons
Small, recognisable cues near the button: accepted payment marks, a guarantee, secure checkout. They reduce the "is this store legitimate" worry at the exact moment of commitment. Keep them honest and few. A wall of generic badges looks like decoration, and invented ones erode trust.
Below the fold: elements 7–12
7. Benefits, not just features
A feature says what the product has; a benefit says what it does for the buyer. Lead with the two or three that matter most, in short lines a thumb-scrolling shopper can skim. The mistake is a wall of manufacturer copy pasted from a supplier page.
8. Details, specs and care
For shoppers who are nearly sure, specs and materials remove the last "what exactly am I getting" doubt. Use a tidy list or accordion rather than a paragraph. The mistake is hiding the dimensions that cause returns.
9. Comparison table
If you sell several versions or compete on a known alternative, a small table does the persuading. Show the differences honestly. The mistake is a table where every row is a tick for you and a cross for everyone else; shoppers notice.
10. Full reviews, with photos
Stars are the summary; the full reviews are the evidence. Real detail, customer photos and a way to filter beat a column of one-line praise. Baymard notes 63% of sites don't let users move through reviewer images across reviews. The mistake is only showing five-star reviews, which reads as curated.
11. FAQ
Answer the questions your support inbox gets: sizing, shipping time, materials, care, returns. It's cheaper than answering them one email at a time, and it catches shoppers who would otherwise leave to search. The mistake is a generic store-wide FAQ instead of product-specific answers.
12. Related products
Last, offer a next step for shoppers whose answer was "not this one", and complements for those who said yes. Keep it to a handful of relevant items. The mistake is a crowded carousel that pulls attention away from the product on the first screen; it belongs at the end.
What changes on mobile?
A large share of your visitors is probably on phones (Shopify's Sessions by device report shows how many), and the page has to rearrange for thumbs: one column, a swipeable gallery, and a buy button that doesn't disappear when the shopper scrolls to read.
- Test on a real phone, not just a resized browser window. Baymard's benchmark rates mobile web lower than desktop (38% decent or better vs 48%).
- Keep delivery and returns in view without a scroll, because those are the doubts that end mobile visits.
- Use accordions for specs and FAQ so the page stays short, but don't hide the benefits.
- Make tap targets generous. Variant buttons that are easy to hit are easier to trust.
How do you change your product page without breaking your theme?
This is the fear that stops most owners: one wrong edit and the page is broken while ads are running. The safe routine is boring, and it works.
- Duplicate the theme first. Per Shopify's help page on duplicating themes, go to Online Store, open the menu on your theme and choose Duplicate. Shopify recommends editing the copy so you can fall back on the original. You can hold up to 20 themes.
- Use the theme editor, not pasted code. Shopify describes sections and blocks as the building units of a theme page: sections are layout units, blocks are the modules inside them. In the editor you can add, reorder, hide or duplicate them, and each template can hold up to 25 sections. Which ones are available depends on your theme.
- Change one thing at a time, so you know what moved the numbers.
- Preview on mobile before you publish.
- Be careful with pasted code. Snippets generated by AI or copied from forums can conflict with your theme. If you go that way, do it only in the duplicate. More on that in our post about the AI Shopify designer.
Common Shopify product page mistakes
| Mistake | What it costs | Fix |
|---|---|---|
| Shipping and returns only at checkout | Surprise at the last step; shoppers leave | Add a one-line delivery and returns note by the button |
| One image, no scale or context | Shoppers can't judge size or quality | Add in-use, in-scale and detail shots |
| Dropdown variants | Hidden options, extra taps | Use buttons or swatches, show stock |
| Supplier copy pasted in | No reason to choose you over a competitor | Rewrite around benefits for your buyer |
| Only perfect reviews | Looks curated, trust drops | Show the full range, with photos |
| Competing buttons near Add to cart | Main action looks optional | One primary button, others secondary |
| Same page for phone and desktop | Lower mobile conversion | Sticky add to cart, accordions, swipe gallery |
Many of these also show up in the carts people leave, which is why recovery emails only go so far; see our guide to abandoned cart recovery.
How does your product page compare to the top store in your niche?
A checklist tells you what a good page contains. It doesn't tell you what the store beating you does differently, and that is what decides who a shopper picks. The video above makes that comparison: a real store with a weak return on ad spend, side by side with a stronger one.
You can do a rough version by hand: open your best-selling product next to a leader in your niche, and answer the five questions on each, in ten seconds, as a stranger. Or let the analyzer do it. Our Shopify store audit scores your pages and ranks what to fix first (ours — full disclosure). For a broader plan, see how to increase your Shopify conversion rate and the Shopify CRO audit checklist. Run the audit on your store →
Frequently asked questions
What is the best layout for a Shopify product page?
Put the gallery and the buy column side by side on desktop, with title, price, review stars, variants, the Add to cart button and a delivery-and-returns line in the buy column. Put benefits, specs, reviews and FAQ below. On mobile, stack it in one column with a sticky Add to cart bar.
How many images should a Shopify product page have?
There is no magic number, so cover the jobs the images must do instead: the product from several angles, in use, in scale where size matters, and a close-up of detail or texture. Baymard found 37% of sites lacked an in-scale image, so that's a common gap.
Where should I put reviews on a Shopify product page?
Show the star rating and review count next to the title and price, then place the full reviews below the fold. Link the stars to the review section so a curious shopper can jump straight to the evidence. Include customer photos where you can.
Should the price show shipping on a Shopify product page?
Show the shipping cost, or the threshold for a lower cost, near the button. In Baymard's benchmark, 67% of sites don't show an estimated total near the buy section. Extra costs are the most cited reason for abandonment in Baymard's list (40%), so it is better to say it early than let checkout say it for you.
How do I A/B test a Shopify product page?
Change one element at a time and compare results for equal periods in Shopify's Conversion rate over time report. That tells you what happened but doesn't split traffic. For a true split test, use a dedicated testing tool and check its documentation, and edit a duplicate of your theme first.