The product detail page is where the shopper decides. Everything upstream (ad creative, collection, search, email) deposits them here and asks a question. On mobile in 2026, the shopper answers that question in the first viewport or they leave. I have watched this happen thousands of times across DTC Shopify builds, and the PDPs that convert share a short list of patterns that are tighter and more honest than the crowded desktop layouts still shipping in older themes.
This is a pattern library for the PDP, specifically the above-the-fold composition on mobile. It is written for Shopify stores but the patterns generalize to any commerce surface where a small screen is doing the selling.
The above-the-fold rule
One viewport. That is your real estate. On a 6.1-inch phone at normal reading distance, the shopper sees roughly 720 pixels of vertical space after the browser chrome and the store header take their share. Everything you want them to see in the first two seconds has to fit in that 720.
The PDPs that convert pick three things to put there and commit. Everything else goes below the fold. The three are almost always: a confident hero image, the price with the primary CTA, and one trust element that belongs to the product (a review count, a compliance badge, a returns promise, not a generic "as seen in" logo row).
The PDPs that do not convert try to stuff twelve things above the fold, each fighting for attention. The logos, the badges, the variant selector with 18 options, the countdown timer, the promotion banner, the Afterpay message, the shipping estimate, the scarcity pill. Every one of them is individually defensible. Together they are noise, and the shopper bounces because nothing is clearly the most important thing on the page.
The gallery pattern
A tall, swipeable hero gallery is the default for mobile in 2026, and it has been for three years. The specifics that matter:
- Aspect ratio. 1:1 or 4:5 work across categories. 1:1 feels grid-native and pairs well with Instagram ad creative. 4:5 gives more image space and is what I default to for beauty, apparel, and most supplements. 16:9 is rarely right for product; it leaves too much empty space on mobile.
- Image count. Four to six primary images, not twelve. If you have twelve, the shopper is not swiping through all of them anyway. Cut the weakest seven.
- First image. Must be a confident product shot on the right background for the category. Lifestyle first is almost always wrong unless the brand is explicitly lifestyle-led and the product is unambiguous.
- Lazy loading. Non-first images lazy load. The first image is preloaded so LCP lands on it, which is the only way to hit the 2.5-second LCP threshold on a mid-range Android phone over 4G.
I have shipped this gallery pattern on DTC builds where the previous implementation had a 4.2-second LCP on mobile. Switching to a proper preload plus lazy-load on the rest dropped it under 2.0 seconds without changing a single visual element. Performance is a conversion pattern, which is exactly why the 48-hour Core Web Vitals fix list comes up in every PDP review I do.
The price and CTA block
Price first, CTA immediately after. That is the pattern. The shopper should never have to hunt for the price or wonder what the primary action is.
Specifics:
- Price is larger than you think. On mobile, 18-20px minimum for the price number. If there is a compare-at price, it is struck through and 70 percent the size of the current price, not the same size.
- Primary CTA is a full-width button. "Add to cart" or "Add to bag" depending on category. Not a secondary-style outlined button. Filled, obvious, tappable with a thumb.
- Variant selector above the CTA. If the product has sizes, colors, or flavors, the selector has to come before the CTA because the shopper needs to make that choice first. Selectors that are disabled until the shopper picks a variant confuse mobile users; just let them tap and handle the empty variant state with a clear error.
- No sticky CTA until the shopper scrolls. A sticky CTA that appears on scroll past the fold is good. A sticky CTA that is always on screen from the first paint fights with the static CTA above it and usually loses both conversions.
“Desktop-first PDPs stuff 12 elements above the fold and hope one works. Mobile-first PDPs pick three and commit.”
The variant pattern
Variant selection is where most PDPs quietly lose conversions because they are either too clever or too lazy. The lazy version is a dropdown with all variants in a list, which is fine for two or three options and terrible for anything beyond. The too-clever version is a custom variant picker with swatches, stock indicators, estimated shipping dates, and a tooltip on hover that never fires on mobile.
The pattern that holds up:
- Swatches for colors. Actual color swatches, not text. Tappable squares or circles at 44px minimum for thumb accuracy.
- Pill selectors for sizes and flavors. Text inside a rectangular pill. Selected state is obvious (filled vs outlined).
- Out-of-stock variants are visible but disabled. Do not hide them. Gray them out, strike them through, label them "sold out". Shoppers decide whether to wait or pick a different option.
- Only one level of nested variants above the fold. If the product has color × size × flavor, one lives above the fold and the others expand below. Shoving all three above the fold eats your entire viewport.
Below the fold: the honest order
Once the shopper scrolls past the fold, the order matters almost as much as the above-the-fold composition. The pattern I keep reaching for:
- Short product description. Three to five lines. The value prop, not the SEO essay.
- Key features list. Four to six bullets. Bolded noun, short phrase. "Third-party tested. Sub-ppm heavy metals."
- Social proof block. Reviews average, count, and the top two or three review excerpts. Not the full review stream yet.
- Trust layer expanded. Compliance badges, returns policy, shipping estimate, guarantee. This is where the fine print lives.
- The "what's inside" or "how it works" module. Especially for supplements, beauty, and hard goods where the shopper needs to understand the product before buying.
- Full reviews. Paginated, filterable, with the highest-signal reviews surfaced first.
- Related products. The cross-sell surface. For subscription-optional products, this is where a "pair with" module earns its keep.
- FAQ. The objection handler. If the shopper reaches here without buying, there is a question you did not answer above.
The trust layer decision
Trust signals deserve their own treatment because placement matters more than the signal itself. A five-star review average in the wrong place does nothing; the same signal 120 pixels higher shifts the conversion number. What moves the PDP conversion number on trust signals is the field-notes version covering which signals are load-bearing in which categories, including the specific difference between "as seen in" logo rows (usually decorative) and third-party certifications (usually load-bearing for regulated categories).
The subscription layout decision
For brands running subscription next to one-time, the PDP layout decision gets sharper. The default selection tells the shopper what you want them to choose before they read a word. One-time versus subscription on the PDP is the decision log walking through which default belongs on which product, and how the layout itself (radio buttons, tabs, toggle) shifts the conversion toward one or the other.
The patterns that do not hold up
A short list of PDP patterns that still show up in 2026 and still lose conversions:
- Countdown timers that reset on reload. The shopper knows. Trust is lost.
- Scarcity pills that lie. "Only 3 left!" when there are 300 in inventory. Same problem.
- Pop-up email capture on PDP load. Blocks the purchase decision. Put email capture after the shopper adds to cart or on exit intent, not on PDP entry.
- Live visitor count widgets. Everyone knows these are fake or meaningless. They signal "I am a store trying too hard", not "I am a trusted brand".
- Autoplay video background that is not muted or is not the hero image. Autoplay muted is fine if the video is the hero. Autoplay video somewhere else on the PDP is almost always a conversion tax.
Where the PDP fits in the hub
This is one piece of the mobile-first DTC conversion pattern library. The cart surface, the collection and search surfaces, and the site speed prerequisite all sit next to the PDP. A great PDP on a slow theme still converts badly; a fast theme with a broken cart drawer loses the purchase after the PDP worked. The patterns stack.
What belongs above the fold on a mobile PDP in 2026?
Three things: a confident hero image, the price with the primary CTA, and one product-specific trust element. That is the entire above-the-fold budget for most categories. Variant selectors sit immediately below these or fold into the CTA block depending on category.
How many gallery images should a PDP have on mobile?
Four to six primary images. Twelve is too many for mobile; shoppers do not swipe through all of them. Cut the weakest and keep the strongest.
Should variant selectors use swatches or dropdowns?
Swatches for colors, pill selectors for sizes and flavors, dropdowns only as a last resort for legitimately long lists (20+ options). Tap targets should be 44px minimum.
Where should reviews live on the PDP?
A short social-proof block (average, count, top two excerpts) goes above the product description. The full paginated review stream goes below the how-it-works module.
Are countdown timers and live visitor widgets still effective?
No. They read as manipulative, and most shoppers are now trained to discount them. Real scarcity (genuinely low stock) communicated honestly still works; fake scarcity lowers trust.
The reference theme
The DTC Theme Starter product ships this PDP pattern pre-built: above-the-fold composition, gallery with proper LCP handling, variant selector patterns, and the conversion framework already in place. It is the reference implementation for operators who want to start from the patterns rather than discover them.
Sources and specifics
- Mobile viewport math (720px vertical after browser chrome and store header) is based on a 6.1-inch phone at a 390-430px wide viewport, which is the dominant range across iPhone 13-16 and most mid-range Android devices in 2025-2026.
- LCP 2.5-second threshold is Google's page experience threshold measured at the 75th percentile on mobile.
- 44px tap target minimum is from WCAG 2.1 AA guidance and mirrored in the iOS and Android platform guidelines.
- The above-the-fold three-element budget is a working heuristic from DTC Shopify builds in 2024-2026, not a published Shopify guideline.