The section order of a high-converting product page

The order is this, and the reasoning for each position is below:

1. The thing, the price, the button. One screen. No scroll required to know what it is and what it costs.
2. The one-line reason to want it. Not a tagline. The specific outcome.
3. The objection that kills this product. Every product has exactly one. Answer it third.
4. Proof you can show rather than claim. Photographs, close-ups, the material.
5. What is in the box, literally. Dimensions, count, weight, what it does not include.
6. Delivery and returns. In plain numbers, before the buyer has to look for them.
7. The second-order questions. Compatibility, care, ingredients, sizing.
8. The button again, and everything after this point is for the minority still reading.

Pages generated by an AI from a one-line prompt tend to carry positions 1, 2, 4 and 8 and skip 3, 5 and 6. Those three are the ones that answer the question the buyer is actually holding.

Why does the order matter more than the design?

Because a product page is not read. It is scanned in one direction, and each section either removes a reason not to buy or it does nothing.

A buyer arrives with a stack of unspoken questions, and the stack has an order that does not change much across products: what is it, how much, will it fit/work/suit me, is this seller real, when does it arrive, what if I am wrong. A page answers them in that order or it makes the buyer hunt. Hunting is the moment the tab closes.

This is why a beautiful page can convert worse than a plain one. Beauty operates on the section; order operates on the sequence. The sequence is where the money is.

What has to be on the first screen?

Three things, and there is no fourth.

The product, photographed large. Not a lifestyle scene with the product occupying nine percent of the frame. The buyer is deciding whether they want this object, so the object is the image.

The price, near the product name, unqualified. A price the buyer has to scroll for reads as a price you are hiding. If there is a range, show the range. If there is a subscription option, show the one-off price first — the subscribe-and-save selector has its own rules and none of them involve hiding the single purchase.

The add button, visible without scrolling. On a 390-pixel screen that is roughly 640 logical pixels of real estate, and an announcement bar plus a large hero image eats it in two elements. What survives that squeeze is covered in what breaks at 390 px.

Everything else on the first screen is competing with those three. A carousel of five badges, a newsletter prompt, a chat bubble that opens itself — each one is a section that was placed by someone thinking about their own page rather than about the buyer's stack of questions.

What is the objection that kills this product?

Every product has one, and it is different for each. Naming it is the highest-leverage twenty minutes of work on the page.

The mistake is to bury the answer in a tab called "Details" at position 9. The buyer with that objection does not open the tab; they leave. Position 3 exists because the objection arrives at position 3, immediately after wanting the thing and seeing the price.

Where do delivery and returns go?

Position 6, and stated as numbers.

Ships in 1-2 working days. Delivery 3-5 days, France. Returns accepted for 30 days, we pay the label. That is one sentence and it removes three objections. The alternative — a link to a policy page — is asking a buyer mid-decision to leave the page and read a legal document.

The specific number matters more than the generosity. "Fast delivery" is a claim; "3-5 days" is information. A buyer can act on the second and cannot act on the first. This is the same principle that makes the free-shipping bar work when it names an amount and fail when it shows a percentage.

What does the section order look like in code?

The value of writing it as an ordered array is that the order becomes a thing you can review, argue about and change, instead of a thing that happens to exist because of the sequence somebody typed the JSX in.

// The page is a list. That is the point: the order is data, not markup order.
type Section =
  | { kind: "hero"; }
  | { kind: "reason"; text: string }
  | { kind: "objection"; question: string; answer: React.ReactNode }
  | { kind: "proof"; images: Photo[] }
  | { kind: "contents"; rows: [string, string][] }
  | { kind: "logistics"; shipDays: [number, number]; returnDays: number }
  | { kind: "questions"; items: QA[] }
  | { kind: "closer" };

const ORDER: Section["kind"][] = [
  "hero", "reason", "objection", "proof",
  "contents", "logistics", "questions", "closer",
];

export function ProductPage({ sections }: { sections: Section[] }) {
  const byKind = new Map(sections.map((s) => [s.kind, s]));
  return (
    <main>
      {ORDER.map((kind) => {
        const s = byKind.get(kind);
        return s ? <SectionView key={kind} section={s} /> : null;
      })}
    </main>
  );
}

Two consequences fall out of this shape immediately. A page that is missing objection or logistics is now visibly missing them — you can assert it in a test rather than notice it in a screenshot six weeks later:

const REQUIRED: Section["kind"][] = ["hero", "objection", "logistics", "closer"];

export function auditPage(sections: Section[]): string[] {
  const present = new Set(sections.map((s) => s.kind));
  return REQUIRED.filter((k) => !present.has(k))
    .map((k) => `missing section: ${k}`);
}

And a section can never quietly move. Reordering is an edit to ORDER, which shows up in a diff as a decision, which is what it is.

Why does an agent produce a different order?

Because it produces the order it has seen most often, and what it has seen most often is a marketing landing page: hero, features in a three-column grid, testimonials, pricing, call to action. That template is fine for software and wrong for an object, because it answers why this category rather than will this specific item work for me.

Ask for a product page and you tend to get: a large hero with the product small inside a scene, three feature cards with icons, a quote block, and a footer. Four sections, none of which is the objection, the contents, or the delivery terms. The page looks finished. It is missing the three sections that were doing the selling.

The mechanism behind that is the same one described in why every Claude Code landing page looks the same. A model reproduces the median of what it was shown; the median page on the web is a marketing page, not a shop.

What to change first on a page you already have

In order of how much they move, on a page that already exists:

1. Put the price and the button on the first screen. If they are not there, nothing else matters.
2. Write the objection section. One question, one honest answer, position 3.
3. Replace "fast shipping" with two numbers.
4. Delete whatever sits between the last piece of information and the final button.
5. Only then, look at the design.

Steps 1 to 4 are edits to the order and the copy. None of them requires a redesign, and they are the ones that change the outcome.

Before editing, measure: the free audit at /audit reads the live page, scores the first screen (price and button visible without scrolling at 390 px), and pins each missing mechanic where it belongs. On a page that already exists, do the additions in improve mode — nothing already on the page moves — as set out at /docs#improve.

Getting a coding agent to produce this order rather than the landing-page order is what uxgen exists for: it hands the agent the sections themselves, as HTML you own, so the order is a decision that ships rather than a prompt that has to be re-argued on every generation.

FAQ

What sections should a product page have, in what order?

The thing with its price and the add button on the first screen; then the one-line reason to want it; then the single objection that kills this product, answered directly; then visual proof; then what is literally in the box; then delivery and returns as numbers; then secondary questions; then the button again. Sections three, five and six are the ones most generated pages omit.

What has to be above the fold on a product page?

The product photographed large, the price unqualified, and the add-to-cart button. Nothing else earns that space. On a 390-pixel phone those three barely fit, which means an announcement bar, a chat bubble or a newsletter prompt on the first screen is displacing one of them.

Where should shipping and return information go on a product page?

Roughly two-thirds of the way down, before secondary questions, and written as numbers rather than as a link to a policy page. One line stating dispatch time, delivery window and return period removes three objections at once; a link asks a buyer mid-decision to leave the page and read a legal document.

Why does an AI-generated product page convert badly even when it looks good?

Because it reproduces the structure of a marketing landing page — hero, feature grid, testimonials, call to action — which answers why the category is interesting rather than whether this specific item will work for this specific buyer. The missing sections are the objection, the literal contents, and the delivery terms, and those are the ones doing the selling.