An ecommerce product page is not a marketing brochure and not a generic landing page. It sells one thing to one buyer, and every section either moves that decision forward or gets cut.
Resolve Objections, in Order
The page's job is to resolve the reasons a visitor might not buy. Structure it around four questions, and check that every section earns its place by answering one of them.
- Is this for me? Name the buyer and their situation in the hero's supporting line, and rank use cases by people like them (surveys, "what owners use it for"). Answering this on the page needs the positioning decided first, so load
ux/positioning.mdbefore writing the hero. - Will it work? Prove the mechanism: specs with their test basis, the product photographed in real use, data with units the reader can decode.
- Can I trust it? Real names, faces, and counts placed near the decision point; a founder or origin note beats an anonymous wall of claims.
- What happens if it does not work? Put the guarantee, the returns process, and the warranty where the buyer decides, not only in the footer. Risk reversal closes more sales than one more feature.
A section that answers none of the four is brochure filler. Cut it, or move it below the decision point.
The Squint Test
The shopper decides in seconds, and three things carry the decision.
- Squint-test every viewport-height screen (or blur a screenshot): only the product image, the price, and the primary CTA may dominate. If a stat tile, label cluster, or section heading wins instead, rebuild the hierarchy.
- The hero's focal element is the product, not the headline. Give the product image real area (roughly 40% of the hero) and first position in the scan path.
- The price is the largest numeral on the page and sits within one eye-jump of the CTA, with any compare-at price and discount attached to it.
Tone Follows the Buyer
- Match the visual tone to the buyer, not the product's material. A cheap impulse purchase converts on light, warm, photography-led pages with faces on the social proof; dark technical aesthetics suit developer tools, not shopping.
- Flat design systems (hairline borders, one surface color, uniform labels) provide no hierarchy for free. Build it: unbox non-interactive content, allow at most one emphasized surface per screen, and reserve it for the buy box.
Verify on the Rendered Page
Screenshot desktop and mobile after building; code review alone passes pages that render flat. Every user-facing number carries a unit the reader can decode in place ("55% of 826 owners", never a bare "453").
The Rest of the Commerce Set
This doc covers the detail page. Two neighbours cover the surfaces on either side of it, and a commerce build usually needs all three. A fourth sits upstream of all of them.
ux/positioning.mdfor the decision that comes before the copy: who the buyer is, what they use today, and the one difference that makes them switch.ux/commerce-catalog.mdfor the listing the visitor arrives from: grid density and what it says about price, arrangement for browsing against searching, bounding each item, and how to present reviews.ui/product-imagery.mdfor which photograph to use: isolated against contextual and in what order, whether to show a person, camera angle, saturation, and zoom.ux/commerce-checkout.mdfor what happens after the buy button: cart, cost transparency, guest checkout, payment, and error recovery.
Checklist
- Every section answers one of: is this for me, will it work, can I trust it, what if it does not
- Squint test passes on every viewport: product image, price, and CTA dominate
- Product image holds roughly 40% of the hero and leads the scan path
- Price is the largest numeral, one eye-jump from the CTA
- Guarantee and returns sit at the decision point, not only the footer
- Tone matches the buyer, not the product's material
- One emphasized surface per screen, reserved for the buy box
- Numbers carry decodable units in place
- Rendered page screenshot checked at desktop and mobile widths