THE CURRICULUM / CH 2 — Shopify Essentials

2.3Websites to Emulate for Product Pages

A teardown you run on any store, and the order you build your own page in.

6 min read

Fourteen people put your blue-light glasses in the cart yesterday and one paid. Nothing is missing from the page. The returns policy exists, the delivery window exists, the size chart exists — in the footer, at the bottom, inside a tab. The other thirteen met the delivery window at checkout.

THE ORDER IS THE WORK. THE PAINT IS NOT.

fix the sequence before anything visual

THE FIRST SCREEN

Effectively all paid traffic arrives on a phone, mid-scroll, from something that interrupted it.

The above-the-fold stack of a product page on a phone: product name a stranger can parse, one image that reads at thumb size, the price plus whether tax and shipping sit on top, one line saying what it does or who it is for, and an add-to-cart reached without stretching that does not move. Below the fold, the remaining questions in the order they arrive: is it for me, what does it look like in real life, what exactly do I get, who else bought it, what if it is wrong, when does it arrive, and how do I pay. No load time, price or rate is shown.
Four jobs. Anything else there competes with them.
  • A name a stranger can parse, and an image that reads at thumb size.
  • The price, and whether tax and shipping sit on top. Discovering either later is where trust leaks.
  • An add-to-cart a thumb reaches, that does not move as the page settles.
  • One line saying what it does, or who for. Not a slogan.
A price on a line, with the alternatives a buyer already has sitting on both sides of it. To the cheaper side: doing nothing, the option they already have at no cost, which asks them for nothing at all, and the cheapest lookalike, the same shape from a name they do not know, which asks them to gamble and to wait. To the dearer side: the name they already trust, bought before or seen everywhere else, which asks them for nothing new, and the proper fix, a service or a professional or a dearer category, which asks for more money and more time. Your price is the only position on the line you choose, and it is never read alone. No currency figure appears; the positions are relative only.
The price is read against what the buyer would do instead.

THE ORDER QUESTIONS ARRIVE IN

  1. What is it. Answered on the first screen or not at all.
  2. Is it for me. The use case, the person, the problem.
  3. What does it look like in real life, at real size.
  4. What exactly do I get. Contents, dimensions, materials.
  5. Who else bought this, and what happened.
  6. What if it is wrong. Returns and sizing.
  7. When does it arrive. Here, not at checkout.
  8. Is this a checkout I recognise.

PRESENCE IS NOT THE SAME AS ARRIVING ON TIME.

delivery below the reviews is delivery nobody read

IMAGES: FIVE JOBS

What a stranger checks before entering a card, the signal that answers each doubt, and where on the page that signal lives. Is this a real shop: a contact route with a real address, in the footer of every page. Will it actually arrive: a delivery window in one sentence, on the page above the reviews. Will it look like the photo: customer photographs, with the reviews. Is it worth this: a rating summary with the moderate ones left in, beside the price. What if it is wrong: the return window and who pays postage, on the page rather than only the footer. Am I safe typing a card: the same name and branding as the page before, in the checkout header and on the card statement. Below, four fabrications that reverse all of it, struck out.
One of these is only ever answered by a photograph.
  • Scale. Something recognisable in frame, or the product held.
  • Detail. Close enough to show material and construction.
  • In use. A real environment, worn or held.
  • What is in the box, laid out. Nobody asks, everybody minds.
  • Variants photographed as themselves, not one shot and a swatch.
An offer taken apart into the four things it is made of, drawn as four equal quarters of one bar. Promise answers what am I actually getting, and is about what changes for the buyer rather than what the thing is. Proof answers why would I believe you, and has to be something the buyer can check without trusting you. Price answers is this worth it to me, and is the only quarter most people ever touch. Risk answers what if it is wrong, and covers returns, warranty and who pays the postage. A reader who changes only the price has changed one quarter of the offer and left the other three exactly as they were. The quarters are drawn equal and no weighting is claimed.
What the copy has to cover.

COPY AND PROOF

  • Write the objection list before a word of copy. Is this a real shop, will it arrive, will it be the thing in the photograph, how do I get my money back.
  • Leave the moderate reviews visible. Perfect scores alone read as filtered.
How a stranger's trust responds to reviews, drawn as two shapes rather than as numbers. The first is a curve of trust against how many reviews there are: it climbs steeply out of nothing, because the first few are the difference between nobody having said anything and somebody having, and then it flattens, because each one after that adds less. The second compares the shape of the ratings themselves. A wall of perfect ones reads as chosen rather than collected, and leaves nothing to weigh it against. A few with a spread across them reads as collected rather than chosen, and the unflattering one is what makes the rest readable. No counts, ratings or star figures are shown, and both the curve and the two spread shapes are illustrative.
Volume without spread is the shape buyers distrust.

WHERE PEOPLE LEAVE

The path from add-to-cart to paid, with the specific reason a stranger leaves at each step. Add to cart: the button has scrolled out of reach. The cart: a total that does not include shipping yet. Checkout opens: it looks like a different company. Details: forced account creation and too many fields. Shipping: the cost and the delivery date both seen for the first time here. Payment: no method they recognise, or a currency to convert. Every exit is a reason, not a rate.
  • The add-to-cart scrolled out of reach, with no persistent buy button.
  • Shipping, tax or delivery appearing first at the payment step.
  • Forced account creation, or a currency the buyer converts in their head.
  • A checkout that looks like a different company from the page before.
What makes a store page slow, drawn as five weights stacked on the page beneath them. Images and video are the heaviest, and the heaviest thing loads before anything can be read. Apps and their scripts come next, because every page pays for a feature that one page uses. Then tracking and pixels, because measurement is not free and loads too. Then chat, popups and widgets, which arrive before they are wanted. Then fonts and theme extras, because a second typeface is a second download. Underneath all of it is the page itself: a photo, a price and a button, carrying the lot. The thickness of each weight is a rank, not a measurement, and no timing figure appears.
On mobile data, speed is the first thing a page says.
Statement poster: "Strangers owe you nothing. Make the page good."

PROCEDURE ONE: THE TEARDOWN

One competitor advertisement broken into its five parts, with what each part tells the reader about the advertiser. The hook, the first two seconds before any argument, tells you what they think stops this audience. Who it talks to, read from the casting, setting and pronouns, tells you who they have decided the buyer is. The promise, the change it says it will make, tells you which problem they sell against. The proof, meaning what is shown rather than what is said, tells you which objection they expect to meet. The ask, what it wants done next, tells you how warm they think the viewer already is. This is a reading key: you are reading their assumptions, not their results, because no result is visible from outside an ad.
You arrive through their ad, so read that too.
  1. Open the store through one of their ads, not by typing the domain.
  2. Screenshot the first screen. Note which of the four jobs it misses.
  3. Scroll to the bottom and list the sections in order. Order only, no judgement.
  4. Against each, write the objection it answers. Sections answering nothing are decoration.
  5. Reach the payment step without paying. Note everything appearing for the first time.
  6. Repeat on two more stores, then your own.
  7. Put the section lists side by side. The differences are your work list.
A branded product page for an invented posture-corrector store, drawn phone-shaped with seven numbered pins down the left margin. Pin one, the first screen: a name a stranger can parse, one image that reads at thumb size, the price with tax and shipping said there rather than at checkout, and a single add-to-cart. Pin two, the problem named before the product, in the buyer's words, including what they already tried and why it did not hold. Pin three, proof placed at the doubt: the rating beside the price, reviews after the description, and the moderate ones left in. Pin four, the offer: what you get, what it costs, what happens next, and one call to action rather than three. Pin five, the guarantee, a money-back window stated plainly in a sentence you would be held to. Pin six, the delivery promise, above the reviews and never first at checkout, with the slowest realistic figure first. Pin seven, the objections — returns, sizing, whether this is a real shop — answered where the doubt occurs rather than in the footer. The store is invented and no real company is depicted.
One branded page pinned part by part.

PROCEDURE TWO: THE BUILD ORDER

The operator's daily loop drawn as a closed circuit. Check: one look at what actually happened. Decide: kill it, change one thing, or leave it. Change one thing: so the next reading means something. Wait: the answer arrives on its own clock. Then the return leg carries you back to the top and it is the same four again tomorrow. Drawn outside the circuit and struck through, because they feel like work and move no decision forward: watching the numbers refresh all day, changing two things at once, starting a second product mid-test, and deciding without writing the reason down. No hours, frequency or schedule is asserted here.
Change one thing, then look again.
  1. Write the objection list first. Nothing starts until it exists.
  2. Build the first screen to do its four jobs. The rest goes below.
  3. Place the sections in the order the questions arrive.
  4. Shoot images against the five jobs, then delete any not doing one.
  5. Write copy section by section, each answering one objection.
  6. Place proof at the doubts: rating near the price, reviews after the description.
  7. Put delivery above the reviews, never first at checkout.
  8. Walk it on a phone and fix whatever appears first after the page.

TAKEAWAYS

  • The first screen must say what it is, show it, price it, sell it.
  • Images prove scale, material, use, contents and variants. Scale surprises drive returns.
  • Proof placed before the doubt reads as bragging. Placed at the doubt, as evidence.
  • Anything appearing first at checkout, shipping cost above all, is an abandonment point.

CHECK YOURSELF

You find a product page you admire. Which part is worth copying?

Where does social proof do the most work on a product page?

DO THIS BEFORE THE NEXT MODULE

  1. 01Run the teardown on three stores in your category and then your own, in one sitting.
  2. 02Audit your product images against the five jobs and shoot or source whatever is missing.
  3. 03Rebuild your product page in the build order, changing nothing visual until the sequence is right.
Enrol free