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
- 1Click the "Copy Prompt" button above
- 2Open your AI tool (Cursor, v0, Lovable, ChatGPT, or Claude)
- 3Paste the prompt and let the AI generate your UI
- 4Customize the output to match your brand and content
💡 Tips
Connect to your product database. Add proper image optimization. Implement variant selection logic.