Product Detail Page
Complete product page with gallery, options, and reviews
PDP Product Conversion
Kopiere diesen Prompt und füge ihn in ChatGPT oder Claude ein
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).So verwendest du diesen Prompt
- 1 Kopiere den Prompt oben
- 2 Füge ihn in dein Lieblings-KI-Tool ein (ChatGPT, Claude, v0, etc.)
- 3 Die KI generiert den Website-Code für dich
- 4 Passe an und iteriere nach deinen Bedürfnissen
Mehr E-Commerce Prompts
Über diesen E-Commerce Prompt
Dieser Product Detail Page Prompt wurde entwickelt, um dir zu helfen, schnell professionelle e-commerce-Websites mit KI-Tools wie ChatGPT, Claude, v0 von Vercel, Cursor und Bolt.new zu erstellen.
Ob Entwickler, Designer oder Unternehmer - dieser kostenlose KI-Prompt gibt dir einen Vorsprung beim Erstellen von product detail page. Kopiere einfach den Prompt, füge ihn in deinen bevorzugten KI-Coding-Assistenten ein und passe ihn an deine Marke an.
Kompatible KI-Tools
- ChatGPT (GPT-4) - Hervorragend für detaillierte Code-Generierung und Erklärungen
- Claude 3 - Ausgezeichnet für komplexe, nuancierte Website-Designs
- v0 von Vercel - Perfekt für React- und Next.js-Komponenten
- Cursor - Ideal für KI-gestütztes Coding in deiner IDE
- Bolt.new - Schnelles Prototyping und Full-Stack-Apps
- Lovable - Benutzerfreundlicher KI-Website-Builder
Tags
PDP Product Conversion E-Commerce KI-Prompt Kostenlose Vorlage Website-Builder Webdesign Copy-Paste Prompt