Product Detail Page
Complete product page with gallery, options, and reviews
PDP Product Conversion
Copia este prompt y pégalo en ChatGPT o Claude
Create an e-commerce product detail page:
1. IMAGE GALLERY (left side, 50-60% width)
- Main image (large, zoomable on hover)
- Thumbnail strip (vertical or horizontal)
- Image zoom/lightbox on click
- Video thumbnail if product video exists
- 360° view button if available
- Mobile: Swipeable image carousel
2. PRODUCT INFO (right side)
Top section:
- Breadcrumb navigation
- Product title (H1)
- Brand name (linked)
- Star rating + review count (linked to reviews)
- Price (large, prominent)
- Sale price in red/accent
- Original price crossed out
- "Save $X" or percentage
- Availability: "In Stock" / "Only 3 left" / "Out of Stock"
- SKU number
3. PRODUCT OPTIONS
- Color selector (swatches with name on hover)
- Size selector (button group or dropdown)
- Size guide link (opens modal)
- Quantity selector (+/- buttons)
- "Add to Cart" button (large, primary)
- "Buy Now" button (secondary)
- Wishlist button (heart icon)
4. DELIVERY INFO
- Estimated delivery date
- Shipping cost or "Free shipping over $X"
- Store pickup availability
- Return policy summary
5. PRODUCT DETAILS (tabs or accordion)
Tab 1 - Description:
- Full product description
- Key features bullet list
- Materials/ingredients
Tab 2 - Specifications:
- Size dimensions
- Weight
- Materials
- Care instructions
- Technical specs table
Tab 3 - Reviews:
- Average rating breakdown (5-star bars)
- Review count
- Sort reviews: Newest, Highest, Lowest, Most Helpful
- Individual reviews with:
- Star rating
- Review title
- Review text
- Reviewer name and date
- Helpful/Not helpful buttons
- Verified purchase badge
- "Write a Review" button
- Pagination
6. ADDITIONAL SECTIONS
- "Complete the Look" (complementary products)
- "You May Also Like" (similar products)
- "Recently Viewed"
- "Customers Also Bought"
7. STICKY ADD TO CART (mobile)
- Fixed bar at bottom
- Price, quantity, Add to Cart button
- Appears when main CTA scrolls out of view
Design: Focus on conversion. Make Add to Cart prominent. Trust signals (secure checkout, returns).Cómo usar este prompt
- 1 Copia el prompt de arriba
- 2 Pégalo en tu herramienta de IA favorita (ChatGPT, Claude, v0, etc.)
- 3 La IA generará el código del sitio web por ti
- 4 Personaliza e itera según tus necesidades
Más Prompts de E-commerce
Acerca de este Prompt de E-commerce
Este prompt Product Detail Page está diseñado para ayudarte a crear rápidamente sitios web profesionales de e-commerce usando herramientas de IA como ChatGPT, Claude, v0 de Vercel, Cursor y Bolt.new.
Ya seas desarrollador, diseñador o emprendedor, este prompt de IA gratuito te da una ventaja al crear product detail page. Simplemente copia el prompt, pégalo en tu asistente de código IA favorito y personalízalo para tu marca.
Herramientas de IA Compatibles
- ChatGPT (GPT-4) - Excelente para generación detallada de código y explicaciones
- Claude 3 - Excelente para diseños web complejos y matizados
- v0 de Vercel - Perfecto para componentes React y Next.js
- Cursor - Ideal para codificación potenciada por IA en tu IDE
- Bolt.new - Prototipado rápido y apps full-stack
- Lovable - Constructor de sitios web IA fácil de usar
Etiquetas
PDP Product Conversion E-commerce Prompt de IA Plantilla Gratis Constructor Web Diseño Web Prompt Copiar Pegar