Home E-commerce Product Detail Page
E-commerce Free Copy-ready

Product Detail Page

Complete product page with gallery, options, and reviews

PDP Product Conversion

The prompt

Copy, personalize, and paste into your preferred AI tool
Was this useful? 

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).

How to use this prompt

  1. 1 Click the "Copy Prompt" button above to copy the full prompt to your clipboard
  2. 2 Open ChatGPT, Claude, or your preferred AI assistant
  3. 3 Paste the prompt and customize any placeholder text (like product names or brand colors)
  4. 4 Let the AI generate your website code or design specifications
Back to E-commerce Prompts Browse All Categories

About this E-commerce Prompt

This Product Detail Page prompt is designed to help you quickly create professional e-commerce websites using AI tools like ChatGPT, Claude, v0 by Vercel, Cursor, and Bolt.new.

Whether you're a developer, designer, or entrepreneur, this free AI prompt gives you a head start on building product detail page. Simply copy the prompt, paste it into your favorite AI coding assistant, and customize it to match your brand.

Compatible AI Tools

  • ChatGPT (GPT-4) - Great for detailed code generation and explanations
  • Claude 3 - Excellent for complex, nuanced website designs
  • v0 by Vercel - Perfect for React and Next.js components
  • Cursor - Ideal for AI-powered coding in your IDE
  • Bolt.new - Quick prototyping and full-stack apps
  • Lovable - User-friendly AI website builder

Tags

PDP Product Conversion E-commerce AI Prompt Free Template Website Builder Web Design Copy Paste Prompt