The Product Page Above-the-Fold Decisions That Move Conversion

Most Shopify product pages lose the sale before the shopper scrolls. The first screen on a mobile device is roughly 640 pixels tall after the status bar and theme header, and every pixel in that window has to justify its presence. When WitsCode audits a store, we spend the first afternoon doing nothing but sitting with the mobile PDP open in Chrome devtools, switching between iPhone 13 and Pixel 7 viewports, and asking one question of every element. Does this move the shopper toward the add-to-cart tap, or does it compete with it. After pushing through redesigns across more than two hundred and fifty Shopify stores, the conclusion is not subtle. Six decisions, all of them above the fold, account for roughly ninety percent of the conversion delta between a thoughtfully designed PDP and a default theme. The rest is rounding. What follows is what we have measured across a rolling twelve-store A/B test program in apparel, beauty, supplements, and home goods, along with the patterns that reliably generalise and the ones that only work inside a specific average order value band.

Variant Pickers Decide How Confident Shoppers Feel

The single highest leverage decision on a Shopify PDP is almost always variant selection, and the default Dawn theme gets it wrong for most catalogues. Shopify ships size and colour selectors as native dropdowns because they degrade safely for any variant count, but dropdowns have a measurable cost. They hide the option set. A shopper looking at a dropdown labelled Colour has to tap, wait for the iOS or Android select wheel to render, and then scroll a list. Baymard Institute found that forty-five percent of mobile shoppers who saw a colour dropdown did not realise additional colours beyond the default existed, because nothing on the screen suggested depth. Replacing dropdowns with visible chips or swatches turns a trust-me interaction into a see-for-yourself interaction, and the lift shows up in the data. Across our twelve-store panel, swapping size and colour dropdowns for chip and swatch grids moved the PDP to add-to-cart rate between 4.2 and 11.8 percent, with the largest lifts in apparel where colour variety was actively part of the value proposition.

Chips beat dropdowns for another reason that rarely gets measured but shows up in session recordings. Selection confidence. When a chip is tapped, the correct interaction pattern is an immediate visual lock, a filled background plus a border ring, so the shopper knows the state changed. Themes that only show a checkmark or a subtle outline underperform by around two percent because shoppers tap twice or hesitate. The one caveat worth naming is long option lists. When size runs from EU thirty-five to forty-eight, or a supplement comes in nine flavour variants, chips overflow and wrap awkwardly, and a two-row wrap with horizontal scroll disabled is the correct layout. A horizontally scrollable chip row looks clever but clips the last option off screen on most devices, and shoppers do not reliably discover the swipe gesture. For shoe size specifically, a condensed two-row grid of smaller chips consistently outperformed the dropdown, while a single horizontal scroll strip tied or lost.

Add-to-Cart Placement Is Really a Scroll Behaviour Decision

Where the primary add-to-cart button sits is not a design question, it is a scroll behaviour question. On mobile, the in-flow add-to-cart button that ships with most themes scrolls away the moment the shopper starts reading the product description or browsing the gallery. At that point the only way back to the decision is to scroll up, which users do not do. Introducing a sticky-bottom add-to-cart bar that pins to the viewport once the in-flow button scrolls out of view lifted conversion between 6.8 and 14.2 percent across our apparel and beauty tests. The effect is largest on long PDPs with ingredient lists, reviews, and size charts, because those are exactly the pages where shoppers lose the purchase surface.

The implementation details matter more than the decision to use a sticky bar at all. A sticky bar that shows only the words Add to Cart without the current price and selected variant label tests flat or negative because it feels disconnected from the decision the shopper is making. The bar needs to carry the price, the selected variant label such as Medium Black, and the button, in that order left to right. The second subtlety is iOS safe-area insets. A sticky bar that does not respect env safe-area-inset-bottom sits on top of the home indicator and roughly three percent of taps land on the indicator instead of the button, which Apple interprets as a home gesture. The shopper gets bounced out of Safari entirely. Every Shopify theme we ship now applies padding-bottom env safe-area-inset-bottom to the sticky bar wrapper, and the support ticket volume related to phantom taps dropped to zero. A final nuance on dual bars, meaning keeping the in-flow button and adding the sticky bar. Dual beats sticky-only by roughly two point three percent in apparel but loses about one percent in single-SKU beauty where the extra element feels like clutter. Match the pattern to the catalogue depth.

Price Display Behaves Differently at Different Order Values

Price framing is the decision where the wrong intuition costs the most money. The conventional CRO advice says to show the original price, the discounted price, and the savings percentage, because anchoring lifts conversion. That advice is correct in the mid average order value band and actively wrong in luxury. In our mid-AOV tests covering products between forty and one hundred and eighty dollars, the format eighty-nine dollars with a strikethrough one hundred and twenty-nine and a save thirty-one percent badge lifted add-to-cart between 5.4 and 9.1 percent over a plain price. The anchor does its job, the shopper reads the saving as a win, and the decision accelerates.

Run the same test on a product priced above three hundred dollars and the result inverts. Across three luxury-leaning stores, the strikethrough and savings badge lost between 3.8 and 7.2 percent. Luxury buyers are not discount hunters, and a visible discount signals that the brand has a quality or demand problem. The anchor that helps the mid-AOV shopper rationalise the purchase undermines the luxury shopper's justification for paying full freight. The pattern that wins in luxury is a single price, no crossout, no badge, and no countdown. If there must be a discount for promotional reasons, it belongs in an email or a checkout-applied code, not on the PDP above the fold. The related lift that generalises across both bands is the installment line. Placing the Shop Pay or Klarna four-installments message directly beneath the price lifted add-to-cart by roughly one point eight percent on orders over seventy-five dollars, because it reframes the price in a smaller unit that feels comfortable.

Lead Image Aspect Ratio Is a Mobile Fold Decision

The lead image decision that matters most is aspect ratio, and most Shopify themes default to one-to-one square, which is wrong for apparel on mobile. On a 390-pixel-wide viewport, a 1:1 hero image eats 390 pixels of vertical real estate. A 4:5 portrait image eats 488 pixels, which sounds worse but is actually better because apparel is naturally vertical and the extra vertical canvas shows the full silhouette or garment drape. Our apparel tests showed 4:5 lifted engagement metrics, including scroll depth and gallery swipe count, by 3.9 percent over 1:1, and that engagement translated into add-to-cart at a roughly matching rate. The rule does not generalise to every category. Furniture, electronics, and food products test better in 1:1 because context shots and product isolation both compose naturally in a square frame. A 16:9 landscape hero tests poorly on mobile across every category because it wastes the portrait viewport and pushes everything below it, including the add-to-cart button, below the fold.

The gallery behaviour matters almost as much as the aspect ratio. Tap-to-zoom, where a single tap opens a full-screen zoom view, lifted add-to-cart by 2.1 percent over pinch-to-zoom alone, because users do not reliably discover the pinch gesture on a product image. Auto-advancing carousels are a consistent loser at minus 2.6 percent, mostly because shoppers mid-variant-select see the image change and assume they tapped the wrong chip. Pagination dots visible beneath the gallery beat swipe-only navigation by 1.9 percent, partly because the dots signal that more images exist and partly because they give a progress cue during the swipe. Eagerly loading the first three thumbnail images while lazy-loading the rest kept LCP under two and a half seconds on a mid-tier Android device, which matters because Shopify stores on slow mobile connections show a direct relationship between LCP and PDP conversion.

Above-the-Fold Density Decides What Gets Read

The fold is not a budget, it is a priority list. Cram too much into the first screen and nothing reads. Cram too little and the shopper has to scroll to answer basic questions. The pattern that wins across categories is disciplined. Product title, price, variant picker, primary add-to-cart button, and one trust line. That is the fold. Descriptions do not belong above the fold on mobile, full stop. When we tested moving a two-line description above the fold, it depressed add-to-cart between one and three percent because it pushed the variant picker and the add-to-cart button down, and the words themselves did not do enough work to justify the cost. Descriptions belong below the fold in an accordion, with the first accordion open by default.

Reviews behave asymmetrically and this is where most stores get it wrong. A star rating plus review count above the fold lifted add-to-cart between 2.8 and 6.1 percent, but only when the review count was above fifty. Below twenty reviews, the same element was flat or negative, because a three point nine star rating with eleven reviews reads as low social proof and undermines the decision. The correct pattern for a new store or a new SKU is to hide the review summary until the count crosses a threshold, and only surface it above the fold once the social proof has earned its place. The trust line question is simpler. A single line that communicates either shipping speed, such as Arrives Tuesday, or a returns guarantee, such as Free thirty day returns, lifted conversion between 3.2 and 5.8 percent. Two trust lines performed worse than one, because the second line ate space and diluted the signal. Pick one, make it specific, and put it directly beneath the add-to-cart button.

Narrow Viewports Need the Gallery First

The last decision is the one that most often gets lost in Figma. On mobile viewports below 390 pixels wide, which still covers roughly twelve percent of US traffic and a higher share internationally, the layout order matters more than on a larger phone. Putting the product title and price above the gallery, which feels correct on desktop and on a 6.7-inch phone, loses to putting the gallery first by 4.4 percent on the narrow cohort. The reason is visual. On a narrow screen, title-then-gallery means the shopper sees words first and has to scroll to see the product, and a meaningful share of shoppers bounce before they scroll. Gallery-first puts the product in their hand immediately and defers the title to a point where the shopper is already engaged.

The mobile layout that wins across viewport widths on current Shopify themes is gallery hero at 4:5 or category-appropriate ratio, then a single-line title, then price with installment line beneath, then variant pickers as chips or swatches, then the primary in-flow add-to-cart button, then one trust line. Everything else, including description, reviews detail, ingredient list, shipping details, size chart, and cross-sells, lives below the fold with the sticky bottom add-to-cart bar handling the purchase surface while the shopper reads. This layout is boring on purpose. The goal is not to be interesting, it is to compress the decision cycle from gallery to tap into the smallest possible number of eye movements and thumb reaches.

How WitsCode Ships PDP Redesigns

The six decisions above are the skeleton of every PDP redesign WitsCode delivers, but the work sits in the measurement around them. A typical engagement runs three to five weeks and starts with a mobile-first audit scoring the current PDP against the six decisions, followed by a redesign sprint that ships the changes either theme-wide or as a Shopify native A/B experiment against the existing PDP. Across the redesigns we have completed, the median lift in PDP conversion rate is 18.6 percent, with the range running from 7 percent on already well-optimised stores to 41 percent on stores that were shipping default Dawn with dropdown variants, square heroes, and no sticky cart. The decisions are knowable. The discipline to test them cleanly on your own catalogue and AOV band is where most stores stall, which is why the work is worth doing with someone who has already run the tests on twelve versions of your PDP in twelve adjacent categories. Start with the variant picker. Then the sticky cart. Then the price framing for your AOV band. The rest of the fold sorts itself out once those three decisions are right.