E-commerce
E-commerce — Product Detail Page
Copy-paste layout brief covering Image Gallery, Product Info, Product Options and Delivery Info — hand it to ChatGPT, Claude, or v0 as-is.
E-commerce — Product Detail Page is a copy-ready build prompt for e-commerce pages. Paste it into ChatGPT, Claude, v0 and iterate from the first draft it returns.
If something here is out of date, the source link below is always the canonical reference.
| Use case | E-commerce |
|---|---|
| Works with | ChatGPT, Claude, v0, Cursor |
| Source | websiteprompts.com |
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 it
- Copy the full prompt with the button above.
- Paste it into your model and add your brand, copy and colours.
- Ask for one section at a time if the first pass is too broad.
Compiled and written by HowToPrompts from public sources. View original source ↗
← Back to Website Prompts