High-Converting Product Pages: A UK Guide to Product Pages That Convert

Updated September 2026. A high-converting product page answers every question a buyer has before they need to ask it: what exactly is this, what will it cost in total, when will it arrive, can I send it back, and can I trust this shop? This UK guide covers each part of the page, including the pricing and review rules that came into force in 2025, with a Product structured data example and a stock check we tested ourselves.

The checklist at a glance

Product pages that convert get these ten things right:

1. A fast main image, plus photos that show size, detail and use.
2. Opening lines that say what it is and who it's for.
3. The total price, including VAT, next to Add to basket.
4. The delivery cost and an estimated delivery date.
5. A one-line returns summary.
6. Genuine reviews, critical ones included.
7. Stock information that is still true at checkout.
8. Options that work with a keyboard, a screen reader and a thumb.
9. Core Web Vitals that pass on an ordinary phone.
10. Product structured data that matches the page.

Product images

Photos do the job a shop assistant would do in person. For each product, aim for a clean main shot, close-ups of materials and details, a photo that shows scale and every colour or variant you sell, and switch the main image when a customer picks a colour.

The main photo is usually the heaviest file on the page and often the element Google times for Largest Contentful Paint. In our WebP vs AVIF vs JPEG XL tests, AVIF was 37% to 67% smaller than JPEG at the same visual quality, so serve AVIF first, with fallbacks, in several widths:

<picture>
  <source type="image/avif"
          srcset="board-600.avif 600w, board-900.avif 900w, board-1200.avif 1200w"
          sizes="(min-width: 960px) 50vw, 100vw">
  <source type="image/webp"
          srcset="board-600.webp 600w, board-900.webp 900w, board-1200.webp 1200w"
          sizes="(min-width: 960px) 50vw, 100vw">
  <img src="board-900.jpg"
       srcset="board-600.jpg 600w, board-900.jpg 900w, board-1200.jpg 1200w"
       sizes="(min-width: 960px) 50vw, 100vw"
       width="1200" height="1200" fetchpriority="high"
       alt="Large oak chopping board on a kitchen worktop, juice groove facing up">
</picture>

• sizes tells the browser how wide the image will appear, so it picks the smallest file that still looks sharp.
• width and height reserve the space, so the page doesn't jump as the photo loads.
• fetchpriority="high" goes on the main image, which should never be lazy-loaded. Lazy-load the gallery thumbnails instead.
• Generate the sizes automatically from one large original when a product is uploaded, and write alt text that describes the photo, not a list of keywords.

Product copy that answers questions

• Start with what it is and who it's for, in a sentence or two beside the price.
• Then give the details people check: dimensions, materials, compatibility, sizing, care and what's in the box. A short specification table scans better than paragraphs.
• Write your own descriptions. Manufacturer copy appears on every site selling the same product, so it gives neither Google nor buyers a reason to choose yours.
• Mine your inbox. If customers ask the same question three times, the answer belongs on the page. Put the size guide next to the size options.

Pricing: show the total, including VAT

The consumer rules in the Digital Markets, Competition and Consumers Act 2024 (the DMCC Act) came into force on 6 April 2025. Prices shown to consumers must be the total price, including every mandatory charge. The CMA's price transparency guidance (CMA209) lists VAT as one, and hiding charges until later in the purchase (drip pricing) is illegal. In practice:

• Show consumers VAT-inclusive prices. If you also sell to businesses, show ex-VAT prices behind a trade login rather than a toggle any shopper can land on.
• Treat delivery properly. If there is no free delivery or collection option, delivery is a mandatory charge, even with a choice of standard or express. The CMA says to include the cheapest option until the customer picks another, or to show delivery charges prominently with a running basket total that includes them.
• Keep "was" prices honest: a price you genuinely charged, not one chosen to inflate the discount.

Delivery and returns on the page

Surprise costs and vague delivery times are classic reasons for abandoned baskets. Settle both on the product page.

• Show the delivery price and an estimated date ("Order within 3 hours for delivery on Tuesday"), worked out from your real dispatch cut-off and carrier times.
• Say where you deliver, including Northern Ireland, the Highlands and islands, and overseas. Remote postcode surcharges that only appear at checkout lose sales.
• Summarise returns in one line ("Free returns within 30 days") and link to the full policy.
• Know the legal minimum. For most online sales, the Consumer Contracts Regulations 2013 give customers 14 days from the day after delivery to cancel, then 14 more to return the goods, and you must refund within 14 days of getting them back (or proof they were sent). Made-to-measure and personalised items are exempt, so say so on those pages. Faulty goods are separate: the Consumer Rights Act 2015 gives 30 days to reject them.

Reviews: genuine ones only

Reviews are often the most persuasive part of a product page, which is why the law now polices them. Since 6 April 2025 the DMCC Act has banned outright:

• writing, commissioning or buying fake reviews, including from staff or friends posing as customers;
• offering incentives for reviews without clearly disclosing it;
• presenting reviews in a misleading way, such as hiding negative ones.

If you publish reviews, you must also take reasonable and proportionate steps to prevent and remove fake ones, and the CMA can now fine businesses directly, up to 10% of global turnover. In practice:

• Ask verified buyers for a review shortly after delivery, and label verified purchases.
• Show the spread of ratings and let people sort by lowest first. A 4.6 with honest criticism is more believable than a wall of five stars.
• Render reviews into the page HTML on the server rather than in a third-party script widget. The text arrives with the page, doesn't slow it down, and search engines can read it.
• Only mark up reviews that appear on the page. Google's review snippet guidelines say not to aggregate ratings from other websites.

Stock messages that stay true

"Only 2 left" helps people decide, but only when it's accurate. Falsely claiming a product or price is available for a very limited time, to rush a decision, is also banned under the DMCC Act, and a countdown that resets on every visit fits that description.

• Show "In stock", "Low stock" or "Out of stock" from the same data your checkout uses.
• When a variant sells out, swap Add to basket for "Email me when it's back", which keeps the customer and builds a restock list.
• Make the reservation itself safe under load.

That last point matters most for shops that sell in bursts. On Anime Weebs, a Django store built for limited-edition drops, one of the challenges was preventing overselling when many customers try to buy the last item at once. One way to handle it in Django is a single conditional UPDATE, so the database decides who got the last one:

from django.db.models import F

def reserve_stock(product_id, quantity):
    """Return True only if the stock was reserved for this customer."""
    updated = (
        Product.objects
        .filter(pk=product_id, stock__gte=quantity)
        .update(stock=F("stock") - quantity)
    )
    return updated == 1

We tested this in a throwaway Django 5.2 project on SQLite, with 50 simulated customers (threads) each buying one of 10 units. The usual load, check and save pattern, with a 50 millisecond pause standing in for the rest of a real request, told all 50 customers their item was reserved and left the stock at 9. The conditional update reserved exactly 10 and left 0. On PostgreSQL a second transaction waits for the first, then re-checks the stock condition, so it is safe there too.

Trust: who you are and how to reach you

• Make an email address, a phone number if you have one and a real address easy to find. The Consumer Contracts Regulations require your identity and geographic address before the customer buys.
• A limited company's website must show its registered name, company number, place of registration and registered office address, usually in the footer.
• Show logos only for payment methods you actually accept, and link delivery, returns and privacy policies from every product page.

Designing for the phone first

• Keep the name, price, main option and Add to basket on the first screen of a typical phone.
• Add a slim sticky Add to basket bar once the main button scrolls out of view.
• Offer express payment: Stripe's Express Checkout Element, for example, shows Apple Pay and Google Pay to customers whose devices support them.
• Use large buttons for sizes and colours rather than small dropdowns, and inputmode="numeric" on quantity fields.

Accessibility

The Equality Act 2010 expects service providers, online shops included, to make reasonable adjustments for disabled customers, and WCAG 2.2 level AA is the usual benchmark. If you sell to EU consumers, the European Accessibility Act has applied to e-commerce since 28 June 2025, with an exemption for micro-enterprises. Product pages most often fall down on:

• Colour swatches with no text. Give each swatch a name ("Forest green") and show the selection in words, because colour mustn't be the only way information is shown.
• Option pickers that don't work with a keyboard. Real radio buttons, styled as swatches or size buttons, work everywhere.
• Small targets. WCAG 2.2 sets a minimum of 24 by 24 CSS pixels for most controls.
• Errors shown only as a red border. "Please choose a size" should appear as text and be announced to screen readers.

Page speed

Google's "good" Core Web Vitals thresholds are a Largest Contentful Paint of 2.5 seconds or less, an Interaction to Next Paint of 200 milliseconds or less and a Cumulative Layout Shift of 0.1 or less, measured at the 75th percentile of real visits. On product pages the usual culprits are:

• an oversized or lazy-loaded main image;
• third-party scripts (review widgets, live chat, tracking pixels, testing tools) competing with your product photo, so remove the ones nobody uses;
• option pickers that re-render the whole page on every click, which hurts Interaction to Next Paint.

Search Console's Core Web Vitals report groups similar URLs, so you can see whether your product pages pass as a group on real visitors' data.

Product structured data (JSON-LD)

Product structured data gives Google the price, availability, delivery cost and returns policy in a form it can read reliably, and makes the page eligible for merchant listing results that show those details in search. Here is a complete example for a UK shop, in pounds with UK delivery and a returns policy. We checked it against the required and recommended properties in Google's merchant listing documentation (last updated 8 September 2026) and ran it through the Schema.org validator on 25 September 2026, with no errors or warnings.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Large Oak Chopping Board",
  "description": "Solid oak chopping board, 45 x 30 cm, with a juice groove on one side.",
  "sku": "OAK-BOARD-L",
  "image": [
    "https://www.example.co.uk/media/oak-board-1x1.jpg",
    "https://www.example.co.uk/media/oak-board-4x3.jpg",
    "https://www.example.co.uk/media/oak-board-16x9.jpg"
  ],
  "brand": { "@type": "Brand", "name": "Example Workshop" },
  "offers": {
    "@type": "Offer",
    "url": "https://www.example.co.uk/products/large-oak-chopping-board/",
    "price": 45.00,
    "priceCurrency": "GBP",
    "availability": "https://schema.org/InStock",
    "itemCondition": "https://schema.org/NewCondition",
    "shippingDetails": {
      "@type": "OfferShippingDetails",
      "shippingRate": { "@type": "MonetaryAmount", "value": 3.95, "currency": "GBP" },
      "shippingDestination": { "@type": "DefinedRegion", "addressCountry": "GB" },
      "deliveryTime": {
        "@type": "ShippingDeliveryTime",
        "handlingTime": { "@type": "QuantitativeValue", "minValue": 0, "maxValue": 1, "unitCode": "DAY" },
        "transitTime": { "@type": "QuantitativeValue", "minValue": 1, "maxValue": 3, "unitCode": "DAY" }
      }
    },
    "hasMerchantReturnPolicy": {
      "@type": "MerchantReturnPolicy",
      "applicableCountry": "GB",
      "returnPolicyCategory": "https://schema.org/MerchantReturnFiniteReturnWindow",
      "merchantReturnDays": 30,
      "returnMethod": "https://schema.org/ReturnByMail",
      "returnFees": "https://schema.org/FreeReturn"
    }
  }
}
</script>

• The price is the VAT-inclusive price the page shows. The markup must match the visible page, so generate it from the same product record that renders the page, never by hand.
• Change availability to OutOfStock, PreOrder or BackOrder as stock changes.
• If one delivery and returns policy covers the whole shop, Google recommends putting it in your Organization markup and keeping offer-level policies for products that differ.
• Add gtin13 (the barcode number) if you have one, and aggregateRating only when genuine reviews appear on the page.

Our guide to Product schema markup for e-commerce explains the rich results it can unlock.

Measure, then change one thing at a time

Send the standard GA4 e-commerce events (view_item, add_to_cart, begin_checkout, purchase) to see each product's view to basket rate. Start with pages that get plenty of views but few additions to the basket, change one thing at a time, and compare over a few weeks or A/B test if you have the traffic.

Platform or custom build?

Most of this checklist can be done on Shopify or any good platform, and that's where many shops should start. A custom build earns its keep when the product page needs what a theme can't do cleanly: prices calculated from dimensions, configurators, trade pricing, or stock that must stay right under heavy demand. Our Shopify vs custom e-commerce comparison sets out the costs on both sides. If you want a shop built around your products and the way you actually sell them, see our custom online shop development.