Shopify's default theme product page is functional but generic. After migrating from WooCommerce — where many stores had heavily customised product page layouts built up over years of plugin additions — the Shopify product page often needs deliberate optimisation to recover and improve conversion rates. This guide covers the key product page elements that drive conversion, what to prioritise in the first month after migration, and how to identify and fix the most common product page issues.

Above-the-fold elements (most critical)

The "above the fold" section (what customers see without scrolling on desktop and mobile) contains the decision-making information. Ensure all of these are visible without scrolling:

Product title: Clear, descriptive, includes key purchase keywords (product type, brand, size/model). Not marketing-speak — "Bosch 18V SDS+ Rotary Hammer" not "Ultimate Drilling Solution".
Price: Prominent. If the product has a sale price, show the original price struck through. If there is VAT-exclusive trade pricing, show the final consumer price (including VAT) as the primary price.
Variant selector: If the product has size, colour, or other variants, the selector must be above the fold. Customers who have to scroll to find the size selector abandon more frequently.
Add to cart button: High contrast, full-width on mobile, prominent on desktop. Primary colour of your design system. "Add to Cart" or "Buy Now" — test both.
Main product image: Large, high-quality. On mobile, the image typically occupies most of the above-fold area — it must be optimised for mobile (crop tightly, no wasted whitespace).
Trust signals: Delivery promise ("Free UK delivery over £50"), returns ("Free 30-day returns"), and security indicator should appear near or just below the add-to-cart button.

Product description structure

Short description first: 2–3 sentences at the top summarising what the product is and who it is for. This is the elevator pitch — many customers read only this. "A lightweight running shoe for neutral pronators. 8mm drop, carbon-infused plate, and cushioned midsole for long-distance road running."
Key features: Bulleted list of 4–6 key features/benefits, each in one line. Customers scan bullet points, not paragraphs. Lead with the most important attribute for the specific product.
Detailed description: Full product description for customers who want detail. Can be in a collapsed accordion (shown/hidden) to keep the above-fold clean.
Specifications: Technical dimensions, materials, and specs in a table or clearly structured format. Essential for technical products (electronics, tools, sanitary ware). Put specs in their own section or accordion — do not embed them in the main description paragraph.
Avoid: Marketing padding ("perfect for every occasion"), generic claims ("high quality"), and long brand history paragraphs. These do not convert — they dilute the specific, useful information customers are looking for.

Product images

Minimum 3–5 images per product: (1) clean product shot on white/neutral background; (2) lifestyle/context shot; (3) detail shot (texture, label, mechanism, key feature); (4) size-in-context shot (product next to ruler, or worn by a person with size labelled); (5) variant image if colour variants exist.
Image zoom: Enable image zoom on the product gallery. Most Shopify themes include this — verify it is enabled. Customers buying online cannot feel the product; zoom reduces uncertainty about texture, finish, and detail.
Video: Product videos are most effective for demonstrating how something works (power tools, sports equipment, furniture assembly). A 30-second demonstration video on the product page measurably reduces returns and support queries.
Image aspect ratio: Consistent aspect ratio across all product images (typically 1:1 square or 4:3). Mixed ratios cause the gallery to shift size as customers navigate between images — poor UX on mobile.
Alt text: Every image should have descriptive alt text. This is both an accessibility requirement and an SEO signal. "Bosch 18V SDS+ Rotary Hammer — front view" not "image001.jpg".

Variant selector UX

Colour swatches: Always use colour swatches (small colour chip) rather than a text dropdown for colour variants. Swatches are faster to scan, more visually engaging, and reduce the cognitive load of translating "Forest Green" into a mental image.
Size guide link: For any product with size variants, include a "Size guide" link immediately adjacent to the size selector. Not in the product description — adjacent to the size buttons so customers see it at the moment of decision.
Unavailable variant display: For variants that are sold out, show them greyed out with a line through them rather than hiding them entirely. Customers who see a greyed-out size know the item exists but is sold out — they can use the restock notification. Customers who see a missing size think the product does not come in that size.
Dropdown vs button selectors: Button selectors (each option shown as a clickable button) are preferred over dropdowns for size and colour — they display all options at a glance without requiring interaction. Use dropdowns only when there are more than 10 options (long dropdowns are acceptable when there are too many choices to show as buttons).
Variant image switching: When a colour variant is selected, the main product image should switch to show the product in that colour. Most Shopify themes support this — assign specific images to specific variants in the product editor.

Social proof placement

Star rating summary: Display the average star rating and review count directly below the product title. "4.8 ★ (127 reviews)" — links to the reviews section. This is the most powerful trust signal on the product page.
Reviews below add-to-cart: Place the full review section (individual review content) below the add-to-cart area but above the fold in a scroll. Customers who are unconvinced by the product description scroll to reviews — reviews must be accessible without heavy scrolling.
Review badges on images: Some themes allow UGC (user-generated content) photo reviews in the image gallery. This is powerful for fashion and lifestyle products where seeing the product on a real person builds confidence.
Trust badges: "Secure checkout", "30-day returns", "UK seller", "Free shipping over £X" — displayed as small icon badges near the add-to-cart button. These should be genuine claims, not generic images.

Urgency and scarcity signals

Low stock indicator: "Only 3 left in stock" when inventory drops below a configured threshold (typically 5 units). This is genuine information, not manufactured scarcity — only display when it is true.
Sales counter: "47 sold in the last 24 hours" — effective for high-velocity products. Avoid using this for slow-moving products as it highlights their lack of popularity.
Delivery cutoff: "Order within 4 hours 23 minutes for next-day delivery." This is the most powerful urgency signal for time-sensitive purchases. Display only if you can genuinely fulfil the promise.

Sticky add-to-cart bar

A sticky bar that appears at the top or bottom of the screen when the native add-to-cart button scrolls out of view.
Most effective for: long product pages with extensive descriptions and reviews. Customers who scroll to read reviews should not have to scroll back up to add to cart.
Implementation: many Shopify themes include this natively. If not, a small app (Sticky Add to Cart — Uplinkly, Sticky Add To Cart ‑ Booster) adds this efficiently.

Product page audit checklist

All products have 3+ images with consistent aspect ratio
Image alt text set for all product images
Image zoom enabled in theme settings
Product title descriptive and keyword-rich (not marketing-speak)
Short description at top of product body (2–3 sentences)
Key features as a bulleted list
Specifications in a structured table or accordion section
Star rating displayed below product title
Reviews section accessible without excessive scrolling
Variant selectors above the fold (no scroll required)
Colour swatches configured (not text dropdown)
Size guide link adjacent to size selector
Sold-out variants greyed out (not hidden)
Trust signals near add-to-cart button (delivery, returns, security)
Low stock indicator configured (triggers below 5 units)
Sticky add-to-cart bar active on long product pages
Mobile view tested: all key elements visible without scrolling

Mobile product page performance is the most commonly underprioritised element after a WooCommerce-to-Shopify migration. WooCommerce stores often had desktop-first product page designs that worked adequately on desktop but were mediocre on mobile. Shopify's default themes are mobile-responsive, but "responsive" does not mean "optimised" — a responsive product page that shows the add-to-cart button below the fold on mobile, uses a small image that does not fill the screen, and places trust signals after three paragraphs of product description is technically responsive but practically unconverted. Test every product page template on a real mobile device, not just Chrome DevTools mobile emulation, and measure time-to-add-to-cart for a first-time visitor. That measurement is the most honest indicator of whether your product page is serving mobile customers well.

Shopify product page optimisation after WooCommerce (2026)