Conversion
The anatomy of a product page that converts on mobile
On a phone a product page is one column, and the order of that column does most of the work. The elements a converting product page carries and their jobs.
By CartKernel · Published
On a phone the product page is a single column, and the buyer meets one element at a time. The sequence of that column decides whether they arrive at the button with their questions already answered or leave to find the answers somewhere else. This is the order we build product pages to, element by element, with the job each one has and the way it usually fails.
The first screen: what it is, what it costs, whether you can have it
Before any scrolling, the page has to confirm three things. The gallery shows the product clearly, the name and price sit directly beneath, and a line of availability says it can be bought. Anything else on the first screen is competing with those three for attention.
The gallery is the largest element and the one most often built wrong. The first image should be the product itself in a consistent aspect ratio across the catalog, swipeable, with an indicator of how many images there are. A video belongs inside the gallery as a slide, not as an autoplaying block above it. How many images a product page needs depends on the category, and the usual failure is fewer than the buyer needs to feel sure, followed by a cropped hero that hides the thing being sold.
The price shows the currency, the compare-at price when there is a genuine reduction, and a per-unit price where the category compares that way. A rating and review count beside the name is worth having only when the reviews are real and visible further down.
Variant selection that cannot be got wrong
Variant pickers cause more silent failures than any other element. Buttons beat dropdowns for anything under about eight options, because the buyer sees every choice without a tap. Colour swatches carry their name on selection. Unavailable variants stay visible but are visibly disabled, so the buyer learns that the blue is sold out rather than that the product is broken. Choosing a colour switches the gallery to that colour, and choosing a size updates the price if it changes.
The size guide lives next to the size picker, opens in a sheet without leaving the page, and gives measurements rather than only letters. The classic failure is the buyer tapping add to cart without a selection and an error appearing at the top of the page, out of view. Either preselect a default or scroll to and highlight the picker when the tap happens.
Availability and the delivery promise
Under the picker the page answers “when would I get it”. An in-stock line, a dispatch time and an estimated delivery window do more for confidence than any badge. Shipping cost or the free-shipping threshold belongs here too. Whether to show shipping costs on the product page is a question we get often, and the answer is that hiding them moves the abandonment to checkout rather than removing it. A one-line returns statement completes the promise.
The button and what happens after it
Add to cart is full width, high contrast, and within reach of a thumb. Once the buyer scrolls past it, a sticky bar with the price, the chosen variant and the button follows them down the page, so the decision can be made anywhere. Express payment buttons sit below the main button, not above it, because the main button is the path most buyers take.
Tapping opens a cart drawer that shows the item, the subtotal, a checkout button and a way to keep shopping. Whether a drawer or a page serves better is covered in cart drawer or cart page; on mobile the drawer usually wins because it keeps the buyer where they were.
Trust in one row
Three short facts under the button: the returns window, the delivery promise, the warranty or guarantee if one exists. Each one true and each one linked to the page that explains it. A wall of badges from schemes the store is not part of reduces trust for the buyers who look closely and is invisible to the rest.
The description, written to be skimmed
Long copy on a phone gets scrolled past unless it is structured. Open with two or three sentences that say who the product is for and what makes it different. Follow with bullets for the facts a buyer checks: materials, dimensions, compatibility, care, what is in the box. Put the long-form copy in an accordion that is open by default for the first section.
If the theme uses tabs, the content of every tab must be in the HTML whether or not it is visible, so search engines and answer engines can read it. Writing descriptions that also work for search covers the copy itself.
Specifications as a table
Anything with a number goes in a two-column table: weight, dimensions, capacity, power, materials, certifications. Tables are read faster than prose, they are what comparison-minded buyers look for, and they are the format answer engines extract from most readily.
Reviews with the useful parts pulled forward
A rating distribution, filters by variant or size, photos from customers, and a fit summary for apparel and footwear. The most recent reviews near the top, the most helpful ones flagged. No reviews are better than invented ones, and the honest version of whether reviews help search is that they help buyers first.
The questions buyers ask before they buy
A short question-and-answer block near the bottom, built from support tickets, chat transcripts and site search terms for this product or category. Sizing, compatibility, shipping to a region, material sourcing, whether it works with the thing they already own. Each answer specific to the product, not boilerplate copied across the catalog.
Related products that complete the purchase
Below the reviews, a row of products that go with this one beats a row of products like this one. A buyer on a tent page has decided on the tent; the footprint and the stakes are the useful suggestion. Similar-product rows belong on collection pages, where the buyer is still choosing.
What costs more than it earns
Some elements reduce conversion on mobile more often than they help: a popup on entry, a chat bubble parked over the add-to-cart button, an announcement bar that takes a fifth of the screen, autoplaying video with sound, and the widget stack from apps installed over the years. Exit-intent popups are a special case, and the honest answer depends on what they offer and when.
The technical layer under all of it
The hero image is almost always the largest contentful paint element, so it needs the right size, a modern format and no lazy loading. Variant selection is the interaction that decides interaction to next paint, and a picker that waits on a script bundle feels broken. Widgets that load late push the button down the page after the buyer has aimed for it. The Core Web Vitals thresholds are a fair proxy for whether the page feels fast, and site speed work on a product template pays across every product at once.
The anatomy on one page
| Element | Question it answers | How it usually fails |
|---|---|---|
| Gallery | What is it | Cropped hero, too few images, video above the fold |
| Name and price | What does it cost | Missing currency, no compare-at, price hidden behind variant selection |
| Variant picker | Which one do I want | Dropdowns, sold-out variants hidden, error out of view |
| Availability and delivery | When will I get it | Shipping cost absent, no delivery estimate |
| Add to cart | How do I buy | Below the fold with no sticky bar, low contrast |
| Trust row | Can I trust this | Badges without substance, policies unlinked |
| Description | Is it right for me | Prose wall, hidden in tabs not in the HTML |
| Specifications | Does it fit or work | Numbers buried in copy |
| Reviews | What do others say | Unsorted, no variant filter |
| Questions | What am I unsure about | Generic copy, not product-specific |
| Related | What goes with it | Similar items instead of complementary ones |
Measuring whether the anatomy works
The number to watch is add-to-cart rate by product template, segmented by device and traffic source. Scroll depth tells you where buyers stop, and variant error events tell you how often the picker is fighting them. A low add-to-cart rate almost always traces to one of the elements above being missing or out of order, and fixing the order is the cheapest product page work there is, because it changes every product at once.