E-Commerce Product Detail Page
A conversion-optimized product detail page with image gallery, variant selector, add-to-cart, reviews, and related products — for DTC e-commerce stores.
Compatible with:ChatGPTv0Bolt.newCursor
Patterns:card-grid, form
Prompt
Build an e-commerce product detail page (PDP) for a direct-to-consumer store. The page should include:
1. **Sticky navigation bar** — Logo left, nav links (Shop, Collections, About, Blog) center, cart icon with badge + search icon right.
2. **Breadcrumb** — "Home > Shop > Footwear > Air Cloud Runner"
3. **Product content section — 2 columns:**
- **Left column (image gallery):**
- Large primary image (aspect ratio 4:5) with zoom on hover.
- Row of 4 thumbnail images below. Active thumbnail has a blue border.
- A "360° View" badge in the top-right corner of the main image.
- **Right column (product info):**
- Brand name in small caps: "NOVA SPORT"
- Product name (H1): "Air Cloud Runner"
- Star rating: ★★★★☆ 4.3 (248 reviews) — linked to reviews section
- Price: ~~$120.00~~ **$89.00** (sale badge in red: "SAVE 26%")
- Color selector: 4 color swatches (white, black, coral, navy), active one has a ring. Label shows selected: "Color: White"
- Size selector: row of size buttons (7, 8, 9, 10, 11, 12), one selected state. "Size guide →" link.
- Quantity selector: "− 1 +" stepper.
- Two CTA buttons: "Add to cart" (primary, full-width) and "Buy it now" (black, full-width).
- Trust badges row: 🚚 Free shipping over $75 | 🔁 30-day returns | ✅ 1-year warranty.
- Accordion: Product Details, Shipping & Returns, Size & Fit (expand/collapse).
4. **Product description** — Full-width section below the 2-col area. Rich text with a product story paragraph, bullet highlights, and a feature grid (4 icons: Lightweight, Breathable, Anti-slip, Cushioned).
5. **Customer reviews** — Average rating prominently displayed, breakdown bar chart (5★ to 1★), and 3 review cards each with: avatar, name, verified badge, star rating, date, review text, helpful vote button.
6. **Related products** — "You may also like" section with 4 product cards in a row (image, name, price, quick add).
7. **Footer** — Standard e-commerce footer.Mockdown
[NAVBAR]
[Logo: NovaSport] Shop Collections About Blog [🔍] [🛒 2]
[BREADCRUMB]
Home > Shop > Footwear > Air Cloud Runner
[PRODUCT SECTION — 2 cols]
┌──────────────────────────────┐ ┌─────────────────────────────────┐
│ [Main Image — 4:5 — 360°] │ │ NOVA SPORT │
│ │ │ Air Cloud Runner │
│ [thumb1] [thumb2] [thumb3] [thumb4] │ ★★★★☆ 4.3 (248 reviews) │
└──────────────────────────────┘ │ │
│ ~~$120.00~~ $89.00 🔴 SAVE 26% │
│ │
│ Color: White │
│ ⬜(active) ⬛ 🟥 🟦 │
│ │
│ Size: Size guide → │
│ [7] [8] [9] [10✓] [11] [12] │
│ │
│ Qty: [−] [1] [+] │
│ │
│ [Add to cart ] │
│ [Buy it now ] │
│ │
│ 🚚 Free ship >$75 | 🔁 30-day | ✅ 1yr │
│ │
│ ▶ Product Details │
│ ▶ Shipping & Returns │
│ ▶ Size & Fit │
└─────────────────────────────────┘
[DESCRIPTION — full width]
"Built for the long run. Engineered with..." (paragraph)
┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐
│ 🪶 │ │ 💨 │ │ 🛡 │ │ 🛋 │
│ Lightweight│ │ Breathable │ │ Anti-slip │ │ Cushioned │
└────────────┘ └────────────┘ └────────────┘ └────────────┘
[REVIEWS]
★★★★☆ 4.3 / 5 248 reviews
5★ ████████████████░░░░ 72%
4★ █████░░░░░░░░░░░░░░░ 18%
3★ ██░░░░░░░░░░░░░░░░░░ 6%
2★ █░░░░░░░░░░░░░░░░░░░ 3%
1★ ░░░░░░░░░░░░░░░░░░░░ 1%
[Review card] [Review card] [Review card] [Load more reviews]
[RELATED PRODUCTS]
You may also like
[Card] [Card] [Card] [Card]
[FOOTER]E-Commerce Product Detail Page
┌───────────────────────────────────────────────┐
│ Logo Search [___________] 🛒 Cart (3) │
├───────────────────────────────────────────────┤
│ │
│ ┌──────────────────┐ Product Name │
│ │ │ ★★★★☆ (128 reviews) │
│ │ ┌──────────┐ │ │
│ │ │ Product │ │ $49.99 $69.99 │
│ │ │ Image │ │ ────────────── │
│ │ │ 📷 │ │ Color: ● ○ ○ ○ │
│ │ └──────────┘ │ Size: S [M] L XL │
│ │ │ │
│ │ ○ ○ ● ○ │ Qty: [ 1 ▾ ] │
│ └──────────────────┘ │
│ [ 🛒 Add to Cart ] │
│ [ ♡ Add to Wishlist ]│
├───────────────────────────────────────────────┤
│ Description │ Reviews │ Shipping │
│ ───────────────────────────────── │
│ Premium quality product with... │
└───────────────────────────────────────────────┘UI Patterns Used
``` Home / Category / Subcategory / Current Item ``` Characteristics: - Compact, horizontal trail
Breadcrumb
Hierarchical trail showing the user's location within a site or app
--breadcrumb--navigation--hierarchy
``` ┌───────────────┬───────────────┬───────────────┐ │ │ │ │ │ ┌─────────┐ │ ┌─────────┐ │ ┌─────────┐ │ │ │ [Image] │ │ │ [Image] │ │ │ [Image] │ │ │ │ │ │ │ │ │ │ │ │
Card Grid
Multiple cards arranged in a responsive grid layout, commonly used for displaying collections of items or data
--grid--cards--gallery+3
Learn more about the UI patterns used in this layout.
Related Layouts
┌───────────────────────────────────────────────┐
│ Logo Search [___________] 🛒 Cart (3) │
├───────────────────────────────────────────────┤
│ │
│ ┌──────────────────┐ Product Name │
│ │ │ ★★★★☆ (128 reviews) │
│ │ ┌──────────┐ │ │
│ │ │ Product │ │ $49.99 $69.99 │
│ │ │ Image │ │ ────────────── │
│ │ │ 📷 │ │ Color: ● ○ ○ ○ │
│ │ └──────────┘ │ Size: S [M] L XL │
│ │ │ │
│ │ ○ ○ ● ○ │ Qty: [ 1 ▾ ] │
│ └──────────────────┘ │
│ [ 🛒 Add to Cart ] │
│ [ ♡ Add to Wishlist ]│
├───────────────────────────────────────────────┤
│ Description │ Reviews │ Shipping │
│ ───────────────────────────────── │
│ Premium quality product with... │
└───────────────────────────────────────────────┘E-Commerce
Product Listing and Catalog Page
A filterable e-commerce product catalog with a collapsible filter sidebar, grid/list view toggle, sort controls, pagination, and quick-add to cart.
--product-listing--filter--catalog
Medium
┌───────────────────────────────────────────────┐
│ Logo Search [___________] 🛒 Cart (3) │
├───────────────────────────────────────────────┤
│ │
│ ┌──────────────────┐ Product Name │
│ │ │ ★★★★☆ (128 reviews) │
│ │ ┌──────────┐ │ │
│ │ │ Product │ │ $49.99 $69.99 │
│ │ │ Image │ │ ────────────── │
│ │ │ 📷 │ │ Color: ● ○ ○ ○ │
│ │ └──────────┘ │ Size: S [M] L XL │
│ │ │ │
│ │ ○ ○ ● ○ │ Qty: [ 1 ▾ ] │
│ └──────────────────┘ │
│ [ 🛒 Add to Cart ] │
│ [ ♡ Add to Wishlist ]│
├───────────────────────────────────────────────┤
│ Description │ Reviews │ Shipping │
│ ───────────────────────────────── │
│ Premium quality product with... │
└───────────────────────────────────────────────┘E-Commerce
Shopping Cart and Checkout Page
A multi-step e-commerce checkout with cart summary, shipping address form, payment method, and order confirmation — optimized for high-conversion DTC stores.
--checkout--cart--payment
Complex