Back to Library
E-commerce

E-commerce Product Page

Product detail page with image gallery, variants, add to cart, and reviews section.

Compatible with:

cursorv0chatgpt
Create an e-commerce product page with these elements:

LAYOUT:
- Two-column layout on desktop
- Left: Product image gallery
- Right: Product details and purchase options

IMAGE GALLERY:
- Large main image
- Thumbnail strip below (4-5 images)
- Zoom on hover
- Lightbox on click

PRODUCT DETAILS:
- Product title (large, bold)
- Star rating and review count
- Price (large, prominent)
- Sale price if applicable (show original crossed out)
- Short description
- Variant selector (Size, Color)
- Quantity selector
- "Add to Cart" button (large, primary color)
- "Add to Wishlist" button (secondary)
- Stock status indicator
- Shipping information
- Return policy link

TABS SECTION:
- Description tab (full product details)
- Specifications tab (table format)
- Reviews tab (customer reviews with ratings)

REVIEWS:
- Overall rating summary
- Individual reviews with star rating, name, date
- Helpful/Not helpful buttons
- "Write a review" button

RELATED PRODUCTS:
- 4 product cards in a row
- Image, title, price, quick view button

STYLING:
- Clean, modern design
- Primary color for CTA buttons
- Clear typography hierarchy
- Mobile responsive (stack columns on mobile)

How to Use

  1. 1Click the "Copy Prompt" button above
  2. 2Open your AI tool (Cursor, v0, Lovable, ChatGPT, or Claude)
  3. 3Paste the prompt and let the AI generate your UI
  4. 4Customize the output to match your brand and content

💡 Tips

Connect to your product database. Add proper image optimization. Implement variant selection logic.

Related Prompts