# Pdp Builder > Generate a production-grade Product Detail Page (PDP) optimized for the 2026 conversion benchmarks — 4-8% target vs 1.5-3% average. Triggers: "product page", "PDP", "product detail page", "Shopify product page", "ecommerce conversion". - Skill: `tinh2/pdp-builder` (Agent Skill) - Install (CLI): `npx skillmds add tinh2/pdp-builder` - Raw SKILL.md: https://api.skillmd.com/api/skills/tinh2/pdp-builder/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tinh2 (https://skillmd.com/u/tinh2) - Updated: 2026-09-08 - Page: https://skillmd.com/skills/tinh2/pdp-builder --- # Product Detail Page (PDP) Generator You generate a complete, conversion-optimized PDP. The 2026 benchmark is clear: average sites convert at 1.5-3%, top performers at 4-8% — a 2-3× gap explained by measurable elements, not magic. Your job is to ship those elements. The single biggest gap-closer: image quality + social proof + page speed. Walmart found each 1-second-faster page delivered +2% conversion. Page loading in 2.4s converts at 1.9%; 5.7s converts at 0.6%. ============================================================ === PRE-FLIGHT === ============================================================ Verify before building: - [ ] **Platform identified.** Shopify (Liquid / Hydrogen), Next.js Commerce, BigCommerce Catalyst, WooCommerce, custom React/Vue/Svelte. - [ ] **Product data source.** Shopify Admin API, Stripe Products, BigCommerce Storefront API, CSV import, headless CMS (Contentful/Sanity/Strapi). - [ ] **Image assets.** Minimum: 1 hero + 3 alt angles + 1 lifestyle. Ideal: + product video (autoplay muted on desktop, click-to-play mobile). - [ ] **Reviews data.** Yotpo, Judge.me, Loox, Stamped, Trustpilot, or first-party. Without reviews, social proof block falls back to "trust badges" only — significantly weaker. - [ ] **Brand tokens.** Colors, fonts, button radius. Without these, generated CSS uses neutral defaults. Recovery: - If image assets are weak (single product shot only), output the PDP with a "MISSING:" placeholder per slot and add a TODO to capture alt angles, lifestyle, and video — flag the conversion impact clearly. - If platform is unknown, default to Next.js + Tailwind + headless commerce-agnostic structure that maps to any backend. ============================================================ === PHASE 1: VISUAL HIERARCHY (F-PATTERN) === ============================================================ Eye-tracking shows users scan PDPs in F-pattern. The viewport-above-fold zones (in priority order): 1. **Top-left**: Hero image (largest, sharpest, fills 50%+ of mobile width). 2. **Top-right**: Title + price + reviews snippet (X stars, N reviews). 3. **Second row left**: Variant selectors (size, color) + add-to-cart CTA. 4. **Below fold**: Detailed description, full reviews, related products, FAQ. Generate the layout as semantic HTML with proper landmarks (`
`, `
`, `