Product Page Design for UK Online Shops

What a buyer needs to see without scrolling

On a phone, the first screen of a product page has to do most of the selling. In order, a buyer is looking for:

1. A clear main photo that shows exactly what they get.
2. The product name written the way people search, such as Solid oak bedside table with drawer rather than Ashby BT01.
3. The price, including VAT for consumers, with any sale price shown honestly.
4. Delivery cost and timing, for example free over a set basket value or dispatched within 2 working days.
5. Stock status, with low stock shown only when it is true.
6. The variant choice and a large add to basket button.

Everything else, from the full description to reviews and care instructions, can sit further down. We design the template around that order and test it at phone widths before the desktop layout is even drawn.

Photos and video that do the selling

Buyers cannot pick a product up, so photos have to answer the questions a shop assistant normally would. A good set usually includes a plain background shot, an in use or lifestyle shot, a close up of the material or detail, a shot that shows scale, and every colour option photographed rather than recoloured.

Technically, we ask for square images of at least 2048 pixels on the long side, the size Shopify's own guidance recommends for zoom. Google's product data specification says Merchant Centre will require product images of at least 500 x 500 pixels from 31 January 2027, so small legacy photos will need replacing anyway. We serve images as WebP or AVIF in several sizes so a phone downloads a small file and a large monitor gets a sharp one.

The main image is usually the Largest Contentful Paint element. Web.dev sets the good threshold for LCP at 2.5 seconds, so we load that image first and lazy load the rest of the gallery.

Variants, sizes and options that do not confuse

Dropdown menus hide choices. Where there are only a handful of options, we use buttons or colour swatches so a buyer can see everything at once. Out of stock options stay visible but greyed out, with a back in stock email signup, rather than disappearing and leaving the buyer wondering.

For clothing and footwear a size guide with measurements in centimetres and inches, plus a note on fit, cuts returns. For furniture and homeware, dimensions belong next to the price, not hidden in a tab. Personalised products need character counts and a preview where possible.

WCAG 2.2 introduced a minimum target size of 24 by 24 CSS pixels for controls at level AA. Swatches and size buttons are classic offenders, so we size them for real thumbs and keep labels readable for screen readers, which is part of our accessible web design approach.

Descriptions written for people and for search

Supplier descriptions are on dozens of other sites. Google has little reason to rank your copy of them. A better product description starts with who the product is for and the problem it solves, then covers the facts: materials, dimensions, weight, care, compatibility and what is in the box.

We structure that into a short opening paragraph, a bullet list of key features, and a specification table that can be scanned. If you have hundreds of products, we write a template and a few examples so your team can follow the same pattern. Extra copywriting is charged at £45 an hour + VAT or covered in your quote.

Product schema and rich results

Product pages should carry structured data so search engines understand them. We add Product markup with name, image, description, brand, SKU and GTIN where you have one, plus an Offer with price, priceCurrency, availability and the product URL. Where it fits, we add shipping details and a return policy using the schema.org types Google documents for merchant listings, and review markup only for genuine reviews collected on your site.

The same product data feeds your Google Merchant Centre listing, so title, price and availability on the page and in the feed always match. A mismatch is one of the common reasons Merchant Centre disapproves products. For the bigger picture of how a shop is planned and built, see ecommerce website design or our approach to conversion-focused web design.

What you get

• Product page template designed for phones first, then desktop
• Image gallery with zoom, swipe and optional video
• Variant selector with clear out of stock states
• Delivery, returns and dispatch information block
• Specification table and size guide where relevant
• Product schema markup and Merchant Centre ready product data
• Related products and recently viewed sections

Prices and how it works

Websites from £250 + VAT, business websites from £500 + VAT and ecommerce from £750 + VAT. Small changes are £45 an hour + VAT. You get a fixed quote before we start.

1. Free chat

   Tell us about your business, who your customers are and what the website needs to do. No charge, no obligation.

2. Fixed quote

   You get a fixed price and a clear list of what is included, in writing, before anything starts.

3. Design

   We plan the pages and design the site around your customers, then share it for your comments.

4. Build and test

   We build it mobile-first, write or polish the copy, set up SEO foundations and test it on real phones.

5. Launch and hand over

   We launch, connect analytics and Search Console, and show you how to update it. You own it all.

Related