A default Shopify product page - even on a well-designed theme - is a general-purpose template. It's built to accommodate any product, which means it's optimised for no product specifically. The layout decisions that determine whether a visitor adds to cart or leaves are mostly configurable, but configuring them correctly requires knowing which decisions matter and in what order.
The hierarchy of the buy box
The buy box - the cluster of elements that drives the purchase decision - should be the first thing a visitor processes on the page. On desktop, it's the right column next to the product images. On mobile, it stacks below the images. In both cases, the elements within it have a correct order:
- Product name - clear, concise, tells the visitor what they're looking at
- Social proof summary - star rating and review count, directly under the title. Not at the bottom of the page: here, where trust is established before the price is seen
- Price - with compare-at (crossed-out original) where genuinely applicable. Never show a compare-at price for a product that isn't actually discounted - it destroys trust with visitors who notice
- Variant selectors - covered in detail below
- Add to Cart button - large, high-contrast, no ambiguity about what it does
- Accelerated checkout buttons (Shop Pay, Apple Pay, Google Pay) - directly below ATC, not above it
- Short trust signals - free shipping threshold, return policy, guarantee - immediately below checkout buttons
Everything else - full description, size guides, specifications, shipping details, full review section - belongs below the fold. Visitors who need that information will scroll for it. Visitors who are ready to buy should be able to complete the action from above the fold.
Product images
Images are the single highest-impact element on a product page for most Shopify stores. Visitors cannot touch, try, or inspect the product - images are doing the work that physical retail does through the senses. Common failures:
- Too few angles. A minimum of 4–6 images for any physical product: front, back, detail, lifestyle, scale reference, packaging if relevant. Variants (colours, sizes with visual differences) need their own image sets.
- Images that don't show scale. A bag, a piece of furniture, a piece of jewellery - customers need to understand size. A human hand in frame, a model wearing the product, a common object for reference. Missing scale context is one of the most common reasons for returns and dissatisfied reviews.
- No zoom. Product photography at 1200×1200px minimum, with pinch-to-zoom on mobile and hover zoom on desktop. Shopify themes handle this natively if images are uploaded at sufficient resolution.
- Variant images not wired up. Selecting a colour variant should swap the gallery to show that variant's images, not stay on the first variant. This requires correct image tagging in Shopify admin and proper Liquid implementation in the theme.
Variant selectors: buttons, not dropdowns
The default Shopify theme uses dropdown selectors for most variant types. Dropdowns are compact and handle large option sets, but they have a significant UX cost: the available options aren't visible without opening the dropdown, and the interaction requires more effort than a tap.
For any variant with fewer than 8–10 options, use button selectors. For colour options, use colour swatches. The visual representation of options drives quicker decision-making, and visually showing out-of-stock variants (struck through, greyed) is more informative than having them disappear from a dropdown.
A visitor who can see all available sizes at a glance and immediately identify which are in stock makes a faster decision than one who opens a dropdown, reads the options, and then mentally maps availability.
The Add to Cart button
Three things the ATC button must be:
- High contrast. Your brand colour on a white background often fails contrast requirements and disappears visually. Test your ATC button against WCAG AA. If you're squinting at it on a phone in sunlight, so are your customers.
- Large enough to tap on mobile without precision. Minimum 48px height. Full-width on mobile - there's no reason for it to be narrower than the screen width.
- Labelled clearly. "Add to Cart" outperforms "Buy Now" for products where customers might add multiple items or continue shopping. "Buy Now" is better reserved for the accelerated checkout buttons where the intent is to skip to payment immediately. "Add to Bag" and "Add to Basket" are fine for brands where the terminology fits.
Social proof placement
Most Shopify stores place their review section at the bottom of the product page - often 2,000–3,000px below the fold on mobile. This is the wrong location for the element that most influences purchase decisions after price.
The high-impact placements:
- Star rating + review count directly below the product title. Not the full review section - just "★★★★★ 4.9 · 342 reviews" as a line between the title and price. Clicking it should anchor to the full reviews section. This gives every visitor the trust signal before they see the price.
- One selected review in or near the buy box. A single strong quote ("Best [product type] I've owned - fits perfectly and arrived next day") directly within the buy box outperforms a star rating alone. Pick the review that addresses the most common objection.
- Full review section below the fold. After description, specifications, and size guide. The visitors who scroll to this section are the ones who need more convincing - give them depth here.
Description structure
The product description has two audiences: visitors who skim and visitors who research. The same text block rarely serves both. The better structure:
- Above-fold summary: 2–4 bullet points immediately below the buy box covering the most important feature/benefit claims. These are the skim-reader's version.
- Accordion or tabs below the fold: Full description, material/specification details, sizing information, care instructions, and shipping/returns - each in its own collapsible section. Collapsed by default except the one most relevant to purchase (usually "Description").
Long blocks of prose in the buy box column push the ATC button off-screen and create the classic "wall of text" layout that kills mobile conversion. Move detail below the fold; keep the buy box tight.
Trust signals
The buy box should contain a short strip of trust signals below the ATC and accelerated checkout buttons. The signals that convert are the ones that address the specific objections customers have before buying from a brand they haven't purchased from before:
- Free shipping threshold ("Free UK delivery over £50") or free shipping if universal
- Return window ("30-day returns") - this alone reduces hesitation significantly
- Security signal ("Secure checkout") - more important on newer or less-known stores
- Delivery estimate ("Dispatched within 24 hours") - specificity here outperforms vague claims
These should be text + icon, not large badge graphics. Badge graphics slow the page and usually look unpolished. A clean row of 3–4 icons with short text labels performs better.
Sticky ATC bar on mobile
On mobile, product pages are read by scrolling - photos, description, reviews. By the time a visitor finishes reading, the buy box has scrolled off screen. A sticky bar that appears at the bottom of the viewport once the main ATC button scrolls out of view - containing the product name, selected variant, price, and a compact ATC button - recovers a significant portion of buyers who would otherwise need to scroll back up.
This is a half-day of Liquid and CSS work. On stores where mobile accounts for more than 50% of sessions (which is most Shopify stores), it consistently improves mobile add-to-cart rates. Dawn and several other OS 2.0 themes have this built in - if yours doesn't, it's worth adding.
Cross-sells and upsells
The placement of cross-sells and upsells is where a lot of product page designs damage their conversion rate in an attempt to improve AOV. Guidelines:
- Frequently bought together in the buy box (below trust signals) works well for products with natural complements - a coffee maker + descaler, a camera + memory card. It works badly for products where the complement is unclear.
- Related products belong below the fold, after reviews. Not above the ATC button.
- Post-purchase upsells (shown after ATC click in a drawer, or after checkout completion) are the least disruptive and often the highest-converting placement. AfterSell and Rebuy handle this well.
A product page with upsell widgets above the ATC button, a "complete the look" section between the images and the buy box, and related products interrupting the review section has no single clear action path. Every addition that doesn't directly drive the primary conversion is a distraction from it.
Page speed
Product pages are often the slowest page type on a Shopify store because of the accumulated weight of review widgets, upsell apps, loyalty widgets, and recommendation engines all loading their JavaScript on the same page. A product page that loads slowly on mobile - which is where most of your traffic is - is a product page with a low conversion rate regardless of how well the layout is designed.
Before investing in a product page redesign, check your PageSpeed mobile score on your current PDP. If it's below 50, fixing performance will move conversion rate more than a layout change. The Speed Audit identifies exactly what's dragging the score down.
Quick-win checklist
- Social proof (star rating + count) directly below product title
- Variant selectors as buttons or swatches, not dropdowns
- ATC button full-width on mobile, minimum 48px height
- Short trust signal strip (shipping, returns, security) below ATC
- Product description in accordion below the fold, not above the buy box
- Sticky ATC bar appearing once main buy box scrolls out of mobile viewport
- Minimum 4–6 images per product, with zoom enabled
- Colour variant images wired to gallery swap on selection
- Cross-sells and upsells below the fold, not between title and ATC
- PageSpeed mobile score above 60 before optimising layout
