PDP-001: Price Visible Above the Fold on Desktop and Mobile, Without Scrolling or Tapping

A product page price is above the fold when it is legible in the first screen a shopper sees, on desktop and on mobile, with no scrolling, tapping, hovering, variant selection or login required. UXFix rule PDP-001 checks exactly this. It is rated Critical because the price is the one number that decides whether a shopper keeps reading or leaves, and a hidden price fails human shoppers and AI shopping agents in the same way.

What rule PDP-001 actually checks

Every rule in our 115-rule book has an ID, a severity, a category and a detection method. PDP-001 is the first product page rule because nothing else on the page matters until the shopper knows what the thing costs.

The one-sentence definition we score against: PDP-001 passes when the current selling price of the default product is rendered as legible text inside the initial viewport on both desktop and mobile, before the shopper scrolls, taps, hovers, selects a variant or signs in.

"Decision" is the category we give to rules where the shopper cannot make the buy decision without the information. Delivery date, stock status and returns are also Decision rules. Price sits at the top of the group because it is the one piece of information nobody proceeds without.

"Vision" is the detection method. We do not just search the HTML for a currency symbol. We load the page at two fixed viewports, take a screenshot before any interaction, and check whether a legible price is present in the pixels. A price that exists in the DOM but sits under a collapsed accordion, behind a modal, or 900 pixels down the page counts as hidden, because it is hidden.

The two viewports are 1440 by 900 for desktop and 390 by 844 for mobile. Those are not the only screens your shoppers use, but they are close to the median for each device class, and if the price is not in the first screen at those sizes it is not in the first screen for most people.

Why does a hidden price cost you the sale?

The shopper's first job on a product page is to decide whether the product deserves more of their attention. They cannot make that decision without a price, so every second the price is missing is a second spent looking for it rather than looking at the product.

Nielsen Norman Group's eyetracking research on scrolling and attention found that users spend about 57% of their viewing time in the first screenful, and attention drops sharply with each screen after that. Whatever you place below the fold is competing for less than half of the shopper's attention. If that is the price, you have made the most important number on the page the hardest to find.

The Baymard Institute reports that 48% of shoppers who abandon at checkout do so because extra costs were too high. That figure is usually quoted about shipping and taxes, and we cover that side of it in Why Shoppers Abandon Checkout Over Hidden Fees and Surprise Costs. The product page version is quieter. When the base price is hidden, every later number is a surprise, and surprised shoppers leave.

There is also a trust cost that is hard to put a number on, so we will not. In audit sessions we watch shoppers land on a page with no visible price and reach the same conclusion: if you are not showing it, it must be high. That is not always true, but the shopper is gone before you get to explain.

Pass, partial and fail, with examples

We score PDP-001 on a three-point scale. Here is what each level looks like on a real page, described the way our reviewers annotate screenshots.

Pass

Mobile, 390 by 844. The header and promo bar take the top 100 pixels. The product title sits directly under the header, and the price, £68.00, sits directly under the title in a font at least as large as the body text, with the compare-at price struck through beside it. The gallery starts below the price. Nothing has been tapped. That is a Pass: the number is legible in the pixels of the first screen.

Desktop, 1440 by 900. Gallery on the left, title and price at the top of the right column, add-to-cart button visible without scrolling. Also a Pass. Desktop passes are common. Mobile is where the rule gets lost.

Partial

A Partial means the price is technically present but the shopper still has work to do, or the rule passes on one device and fails on the other. The cases we see most often:

• Range only. "From £49" on a configurable product with no default variant priced. The shopper knows the floor, not the cost.
• Variant gated. The price area reads "Select a size" until an option is tapped. One tap is still an interaction.
• Desktop only. Price is clear at 1440px but sits under a full-height gallery at 390px.
• Low contrast. Price is in the viewport but rendered in light grey on white below the 4.5:1 ratio in WCAG 2.1 success criterion 1.4.3. If a shopper with average vision in daylight has to squint, we mark it down.
• Ambiguous figures. Two prices with no strike-through and no label, so the shopper cannot tell which one they will pay.

Fail

A Fail means no legible current price in the first viewport on at least one device, or the price requires more than one interaction to surface.

• "Add to cart to see price" or "Login for pricing" with no figure shown.
• Price only in a sticky bar that slides in after the shopper scrolls.
• Price inside a collapsed "Details" accordion.
• Price rendered as part of an image rather than as text.
• A hero image set to 100vh that pushes title, price and button below the first screen on every device.
• Price injected by a third-party pricing or personalisation script that resolves two or more seconds after first paint. Our capture waits for network idle, but if the script fails or is blocked the page ships with a blank.

The before layout is the single most common Partial we record. Nobody decided to hide the price. A theme defaulted to a square gallery, someone added a promo bar, and the price slid off the screen without anyone noticing.

Mobile is where the rule is lost

A 390 by 844 viewport gives you 844 vertical pixels. Browser chrome on iOS Safari takes roughly 140 of those before your page renders anything, leaving around 700. A sticky header at 60px and a promo bar at 40px leave 600. A square gallery at 390px leaves 210. That is the space you have for title, price and the start of the buy button, and it is not much.

The arithmetic is why we recommend one of three layouts for mobile product pages:

1. Title and price above the gallery. The shopper reads the name and the number, then swipes photos. This is the layout most likely to pass PDP-001 without any other change.
2. Shorter gallery. A 4:3 or 3:2 image at full width is 290 to 260 pixels tall instead of 390, which usually pulls the price back into the first screen.
3. Price overlaid on the gallery. A small, high-contrast price chip in the corner of the first image. This passes the vision check but is fragile: it depends on every product photo having a quiet corner.

A sticky add-to-cart bar with the price in it is good practice and we credit it under a separate rule. It does not count for PDP-001 on its own when it only appears after scroll, because the rule is about the first screen, not the tenth.

Cookie banners deserve a note. We dismiss them before capture, because every store in the EU has one and it would make the rule meaningless. Anything else that stands between the shopper and the number counts against you: newsletter modals on load, app download interstitials, region selectors that block the page. If the shopper must tap to make the price appear, it is an interaction.

The other mobile failure we see is a promo bar that stacks. Free shipping bar, plus a sale countdown bar, plus a "download the app" bar, and 150 pixels are gone before the header. Keep one bar, or none on product pages.

How AI shopping agents find your price, or miss it

AI shopping agents reach product pages in two ways, and PDP-001 affects both.

Text-based agents fetch the HTML and parse it. They look for a schema.org Offer, then fall back to microdata, then to regular expressions over the visible text. If your price is loaded client-side by a script, or lives only in an image, a text agent may find nothing or find the wrong figure. We wrote up the failure modes in Why AI Shopping Agents Misread Your Prices.

Vision-based agents, which is how most browser-operating agents now work, take a screenshot and ask a model what it sees. They see exactly what a human sees at that viewport. A price below the fold is invisible to them until they decide to scroll, and many agents are configured to give up on a page after one or two screens without a price. A price gated behind a variant selection is worse: the agent may pick the first option and quote that figure, or quote the strike-through price by mistake.

The fix for both kinds of agent overlaps almost entirely with the fix for humans. Put the current price as real text in the first viewport, and back it with structured data. The minimum schema.org Offer we look for is short:

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Merino Crew Sweater",
  "offers": {
    "@type": "Offer",
    "price": "68.00",
    "priceCurrency": "GBP",
    "availability": "https://schema.org/InStock"
  }
}

Three things matter here. The price must be a plain number with no currency symbol. The currency must be an ISO code. And the value must match the price a shopper sees on the page. When the structured data says 68.00 and the visible page says 54.40 because a sale script rewrote it, agents flag the mismatch and some will refuse to recommend the product at all.

Our agent score for PDP-001 checks the screenshot first, then the structured data. A store can pass the human check and fail the agent check if the Offer is missing or wrong, which is why the rule card shows two scores in your report.

The PDP-001 checklist

Run this on your three best-selling products, on a real phone and a real laptop, before you touch anything else in the audit.

• Load the product page from a cold tab. Do not scroll. Do not tap.
• Can you read the current selling price without squinting? Note the pixel position from the top on both devices.
• Is it a single resolved figure for the default variant, not a range and not a placeholder?
• If there is a sale, is the current price clearly the current price, with the old one struck through?
• Does the price render as selectable text? Try to highlight it.
• Does it still show with JavaScript disabled, or at least with your personalisation scripts blocked?
• Does the schema.org Offer price match the visible price to the penny?
• Repeat with a promo bar, cookie banner and any modal in their default state, then again dismissed.

PDP-001 is one of twelve product page rules and one of 115 in total. The full list is in All 115 Ecommerce Checkout UX Rules We Audit Against, and the wider set of reasons shoppers leave a product page is covered in Why Shoppers Leave Your Product Page Without Buying: 12 Fixes. If you only have time for one fix this week, this is the one, because every other product page rule assumes the shopper is still on the page.

Frequently asked questions