How to design the ideal product detail page

Product detail page blueprint: first-glance priority, mobile sticky add-to-cart, swipe gallery, collapsible specs, FAQ for SEO.

Written By Bas den Hoed

The product detail page (PDP) is the last page before the cart. Every other page on your shop exists to send qualified traffic here. If the PDP is built well, conversion follows; if it's cluttered, slow, or missing the basics, no amount of homepage polish saves it. This article walks through the full PDP blueprint for a plant-shop, with explicit mobile patterns — because most of your PDP traffic lands on a phone.

💡 The #1 mistake: trying to cram everything above the fold. The fold doesn't exist anymore — but first-glance priority does. Make sure the photo, name, price, stock, and primary CTA are the first things a visitor sees, and let the rest unfold below.

The first view: five elements, no compromises

When the PDP loads, five things must be visible without scrolling — on desktop and mobile. Anything else competing for that space gets pushed down.

  • Hero photo, large, with at least three more thumbnails visible (or a swipeable gallery on mobile). Lifestyle hero, not white-studio. See Product photography for the shotlist.

  • Product name, clear and full: "Monstera Deliciosa — Ø 17 cm, 60 cm tall". Latin name + size in the title saves dozens of support questions.

  • Price, prominent, with strikethrough MSRP and sale price if applicable. See Pricing and stock messaging for the rules around fake-urgency and sale framing.

  • Variants if the product has them — pot size, plant height, pot colour. Buttons or swatches, not dropdowns. Out-of-stock variants greyed out, not hidden. See Product variants for the variant-versus-separate-product decision.

  • Stock + delivery promise + primary CTA, in that order. "In stock — order before 14:00, delivered tomorrow" sits directly above the Add to cart button. The promise and the button live together, because the promise is what closes the click.

That's it for the first view. No "Why buy from us" block, no upsells, no full description. Those come below.

Second section: gallery + specs

Below the first view, two side-by-side blocks (or stacked on mobile):

  • Thumbnail gallery: four to six photos. Hero (lifestyle), pot detail, scale reference (hand or room shot), top-down for hanging plants, packaging-on-arrival shot if you have it. Customer photos from reviews can slot in at the end.

  • Specs table: the seven essential plant specs in a compact two-column table — pot diameter, plant height at delivery, light requirement, water frequency, pet-toxic yes/no, growth rate, mature size. Optional rows below for origin, certifications, fragrance. Specs in a table, not buried in the description. See Product specifications for the full template and which specs are non-negotiable.

The specs table does double duty: it answers the customer's pre-purchase questions, and it feeds the filters on the collection page. A clean spec is a filter the visitor can use elsewhere in the shop.

Third section: long description + care

Below specs comes the long description — the place where you actually sell the plant rather than list its properties. The four-block template (evocative opener → sensory description → where it thrives → care quick-reference) is the default; for the full structure see Product descriptions.

For plants specifically, this is where you also include the care quick-reference card: light, water, humidity, repotting, common issues. Even if the specs table covers it numerically, customers want it written out in plain language. Two paragraphs of care text earns its keep on every plant PDP.

Fourth section: trust strip + reviews

A horizontal strip with three to five trust elements: free-shipping threshold, return policy, plant guarantee, payment icons. One line each, icons + short label.

Directly below, the reviews block: aggregate score at the top ("4.7 / 5, 142 reviews"), three to five most-recent reviews displayed, "see all" link to the full list. Reviews on the PDP convert harder than reviews anywhere else — this is the moment a visitor is closest to the buy decision and needs reassurance from a stranger. See Customer reviews.

Fifth section: complete the look

One row of three to four products, hand-curated or algorithmically matched. For plants this is the natural place for pots, soil, watering tools, and bundled care kits — the "complete the look" framing converts on a plant PDP because the visitor already mentally owns the plant.

What works: "Pair this Monstera with a Ø 21 cm terracotta pot and bamboo stake." What doesn't: a generic "you may also like" row of unrelated plants. If your recommendation engine has nothing relevant, show nothing. Empty curation beats noisy curation. Full logic in Upsells and cross-sells.

Sixth section: PDP FAQ

Three to six product-specific questions in collapsible H3s: "Is this plant safe for cats?", "How often does it need watering?", "Will it survive in a north-facing window?", "What size will it grow to in 2 years?". This block does triple duty — it answers pre-purchase questions, it removes support tickets, and it's strong SEO content because it's full of long-tail keywords your audience actually searches.

Mobile: this is where most PDP traffic lives

Roughly 70% of plant-shop PDP traffic is mobile, and most resellers' PDPs are still designed desktop-first and mobile-translated. Three patterns that matter on mobile:

Sticky add-to-cart bar

Once the visitor scrolls past the first view (~600 px down), a thin sticky bar appears at the bottom: thumbnail + price + Add to cart. Always visible after that point, regardless of scroll depth. This single pattern increases mobile conversion meaningfully — the alternative is forcing the visitor to scroll back up after reading the description, and many won't.

The gallery on mobile should swipe horizontally, with dots indicating photo count. Tap to zoom. Don't replicate desktop's vertical thumbnail strip — it eats screen real estate and reads as broken. The swipe gallery is the single most-used UI element on a mobile PDP after the Add to cart button.

Collapse the specs table

Specs and FAQ should default-collapsed on mobile (one-tap to expand). The reasoning: the visitor already saw the essentials in the first view, and forcing them to scroll past 12 rows of specs to reach the Add to cart breaks flow. Default-expanded specs are a desktop pattern; mobile readers expand only what they need.

⚠️ Test on a real phone, not the responsive-mode emulator. Touch targets, sticky-bar spacing, and gallery swipe behaviour all behave differently on actual devices. Spend 10 minutes on your own phone before declaring the mobile PDP done.

What does not belong on a plant PDP

  • Newsletter modal on PDP load. The visitor came here to evaluate a product, not to subscribe.

  • Auto-playing video with sound. Muted background loops on the hero are fine; sound-on autoplay is a bounce trigger.

  • Recently viewed products at the top of the page. Bottom of the page is fine; top steals attention from the actual product.

  • Live chat bubble covering the Add to cart on mobile. If your chat widget overlaps the sticky CTA at narrow widths, move the bubble or hide it on PDPs.

Next action

Open your three highest-traffic PDPs on your phone. For each, time how long it takes you to find the price, the stock status, and the Add to cart from a fresh page load. If any of those takes more than two seconds, your first view is wrong. Fix the first view first, then layer the rest of the blueprint downward — gallery, specs, description, trust, cross-sells, FAQ. The order matters more than the polish on any single section.