**TL;DR.** Great PDPs optimize three things: (1) speed (LCP < 1.8s, INP < 200ms), (2) clarity (gallery, variant, buy button), and (3) trust (reviews, return policy, shipping, social proof). Each element has measurable conversion impact. Stack them deliberately.

## The PDP funnel

Typical ecommerce funnel (industry benchmarks 2025–2026):

| Step                                  | Median conversion | Top-quartile     |
| ------------------------------------- | ----------------- | ---------------- |
| PDP view → add-to-cart                  | 8–15%             | 20–30%           |
| Add-to-cart → checkout                  | 50–65%            | 70–80%           |
| Checkout → purchase                     | 50–70%            | 75–90%           |
| **Overall PDP view → purchase**         | **2–4%**          | **8–15%**        |

Stores that move from median to top-quartile on each step double or triple revenue per session.

## Speed

Covered in detail in the [Core Web Vitals guide](/guides/core-web-vitals-ecommerce-2026). Key thresholds for PDP:

- LCP ≤ 1.8s (target), ≤ 2.5s (good).
- INP ≤ 150ms (target), ≤ 200ms (good).
- CLS < 0.05 (target), ≤ 0.1 (good).

One second of LCP improvement on PDP typically yields 5–15% conversion lift.

## Gallery and primary image

The first product image is your LCP. Patterns:

| Element            | Best practice                                                       |
| ------------------ | ------------------------------------------------------------------- |
| Main image size    | 800×800px to 1200×1200px on desktop; full viewport width on mobile  |
| Format             | AVIF (with WebP/JPEG fallback)                                       |
| LCP preload        | Yes, `<link rel="preload" as="image" fetchpriority="high">`          |
| Thumbnail position | Vertical strip on desktop (left or right); horizontal under main on mobile |
| Pinch-zoom         | Yes on mobile                                                        |
| Hover zoom         | Optional on desktop; don't block click-to-detail                    |
| Number of images   | 4–8 typical; 12+ for fashion or complex products                     |
| 360° view          | High-value for high-AOV products; lazy-load (don't block LCP)       |
| Video              | Below the gallery, autoplay muted, lazy-load                         |

## Variant selection

The two universal variant types:

**Color**: use color swatches (visual circles or squares of the actual color).

```html
<div role="group" aria-label="Color">
  <button aria-pressed="true" aria-label="Brown">
    <span style="background: #5C3A21" />
  </button>
  <button aria-pressed="false" aria-label="Black">
    <span style="background: #1A1A1A" />
  </button>
  <!-- ... -->
</div>
```

**Size**: use buttons with the size label.

```html
<div role="group" aria-label="Size">
  <button aria-pressed="false">S</button>
  <button aria-pressed="true">M</button>
  <button aria-pressed="false">L</button>
  <button aria-disabled="true">XL (Out of stock — notify me)</button>
</div>
```

Rules:

- Use `aria-pressed` for selected state.
- Disable out-of-stock variants visually; offer "Notify when available."
- Update the URL to include the selected variant for shareability (`?variant=size-m`).
- Optimistic UI for variant swap (covered in [INP guide](/guides/inp-optimization-product-pages)).

## Add-to-cart

The primary CTA. Best practices:

| Element                | Pattern                                                                |
| ---------------------- | ---------------------------------------------------------------------- |
| Button text             | "Add to Cart" or "Add to Bag" (your brand vocabulary)                  |
| Color                   | Brand primary; high contrast against page background                    |
| Size                    | Full-width on mobile; minimum 48×48px tap target                        |
| Sticky on mobile        | Yes, anchored to bottom on scroll past initial fold                     |
| Loading state           | Spinner in button while server confirms; never block the page          |
| Confirmation pattern    | Slide-in mini-cart or toast; not a full page interrupt                  |
| Stock urgency           | "Only 3 left" if true; never fake                                       |
| Price near button       | Yes, large and clear                                                    |

Anti-patterns:

- Multiple primary CTAs ("Add to Cart" + "Buy Now" + "Quick Buy") — splits attention.
- Modal interrupt after add-to-cart ("Continue shopping or checkout?") — adds a step.
- Hidden price (force scroll up to see).

## Trust signals

The cluster of signals near the buy button:

1. **Free shipping threshold**: "Free shipping over $50" — drives basket size up.
2. **Return policy summary**: "30-day free returns" — reduces purchase friction.
3. **Estimated delivery**: "Arrives Wednesday, May 15" — concrete dates beat ranges.
4. **Security badges**: Stripe-style "Secure checkout" indicator — minor but cumulative.
5. **Aggregate review stars + count**: "4.7 ★ from 218 reviews" — primary trust signal.

## Social proof

Effective social proof patterns:

- **Verified review excerpts**: 2–3 reviews above the fold with star rating, author, date.
- **Review count**: large number (218 reviews) is more persuasive than just stars.
- **"X people viewed this today"**: low-pressure scarcity. Use real data, not random.
- **Recent purchase notifications**: pop-up showing "Sarah from London bought this 3 hours ago." Real, opt-in for the purchaser. Frequency: every 30–60 seconds, max.
- **User-generated photos**: Instagram-style grid of customers wearing/using the product.

Avoid:

- Fake reviews.
- Fake stock urgency ("Only 1 left!" when there are 200).
- Aggressive countdown timers ("Offer ends in 3:21!").

These backfire — modern shoppers recognize them and trust drops.

## Frequently bought together

A real conversion lever. Pattern:

```
This product: Brown Leather Messenger Bag       $149
+ Brass Buckle Belt                              $89
+ Leather Cardholder                             $49
─────────────────────────────────────────────────────
Total bundle:                                    $287
[ Add bundle to cart  →  $258 ] (saves $29)
```

Implementation:

- Pre-compute "frequently bought together" pairs from order-item co-occurrence + cosine similarity on `descriptionEmbedding`.
- Real `<a>` tags pointing at the recommended products (crawlable for SEO).
- One-click bundle add.

## Similar products

Below frequently-bought-together. Use:

- pgvector cosine on `descriptionEmbedding` to find similar in same category.
- Optionally filter by price range.
- Real `<a>` tags with `rel="related"`.

## Specs and description

Long-form content is good for SEO and good for high-consideration purchases. Structure:

```markdown
## Description
[Full marketing copy — 2-4 paragraphs]

## Specifications
| Material       | Full-grain leather |
| Dimensions     | 13" × 11" × 4"     |
| Weight          | 1.8 lbs            |
| Hardware       | Solid brass         |
| Origin          | Made in Italy       |

## What's in the box
- Bag
- Removable shoulder strap
- Dust bag
- Care guide

## Care
[Care instructions]
```

This content also goes into the Product `description` JSON-LD field, improving rich result depth.

## Reviews section

Below the spec section. Best practices:

- Show all-time average + count prominently.
- Distribution histogram (5-star: 67%, 4-star: 22%, 3-star: 8%, 2-star: 2%, 1-star: 1%).
- Sort and filter (most recent, most helpful, by star).
- Pagination or infinite scroll (lazy load).
- Reply to reviews where relevant.
- Verified purchase badge.

## How Ordiko's default PDP is built

- Server-rendered with React Server Components.
- LCP main image preloaded with `priority` and `fetchPriority="high"`.
- Variant selector with `useOptimistic` for instant feedback.
- Sticky mobile add-to-cart from scroll past initial fold.
- Slide-in mini-cart confirmation (no page interrupt).
- Trust signals (free shipping, returns, secure checkout) rendered server-side.
- Verified review summary and review list (top 5 in JSON-LD).
- Frequently bought together via pgvector cosine similarity.
- Similar products in same category, crawlable links.
- Full description + specs + reviews below the fold.

Default INP < 200ms p75 with this setup.

## FAQ

**What's the most underrated PDP optimization?**
A sticky mobile add-to-cart button that stays visible during scroll. On long PDPs (which they should be for SEO), users scrolling reviews or specs need a single tap to buy. Stores that add a sticky CTA typically see 10–20% mobile conversion lift.

**Should I hide out-of-stock variants?**
No. Show them visually disabled but still present. Hiding them creates inconsistent UX and signals that returning customers can't find a product they bought before. Disable + 'Notify me when available' converts customers into email subscribers.

**How much social proof is too much?**
One pop-up notification of recent purchases every 30–60 seconds feels useful. Every 5 seconds feels manipulative. A persistent 'X people viewed this in the last 24h' is fine. Excessive social proof is the leading cause of trust erosion.

**How does Ordiko approach PDP UX?**
Ordiko's default PDP includes sticky mobile CTA, LCP-preloaded main image, color/size swatches with optimistic UI, verified review summary, frequently-bought-together (pgvector cosine on description embeddings), and breadcrumb + JSON-LD by default. INP < 200ms p75 with the default theme.