E-commerce
E-commerce — Product Comparison Page
Copy-paste layout brief covering Navigation Bar, Breadcrumb & Page Header, Product Header Row and Quick Verdict Banner — hand it to ChatGPT, Claude, or v0 as-is.
E-commerce — Product Comparison 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 |
Build a clean, conversion-focused product comparison page for an electronics retailer called "TechVault" — a premium consumer electronics store. This page compares 3 wireless noise-cancelling headphones side-by-side. The design should make complex spec data easy to scan, highlight differences clearly, and guide the user toward a purchase decision.
1. NAVIGATION BAR
- Logo: "TechVault" in bold sans-serif with a vault-door icon, dark charcoal (#1A1A2E)
- Links: Shop, Deals, Compare, Reviews, Support
- Right side: search icon, wishlist heart with count badge, cart icon with item count, "Account" dropdown
- White background, subtle bottom shadow, sticky on scroll
- Mobile: logo + search icon + cart icon + hamburger
2. BREADCRUMB & PAGE HEADER
- Breadcrumb: Home > Headphones > Compare
- Title: "Compare Wireless Noise-Cancelling Headphones"
- Subtitle: "Side-by-side comparison of the top 3 premium headphones to help you pick the right one"
- "Edit comparison" text link to add/remove products from the comparison
- Share icon to copy comparison URL
3. PRODUCT HEADER ROW (sticky on scroll)
- 4-column layout: label column (200px) + 3 product columns (equal width)
- Each product column contains:
- Product image (200px square, white background, centered)
- Product name (bold): "Sony WH-1000XM5", "Bose QuietComfort Ultra", "Apple AirPods Max"
- Star rating with count: "★★★★★ 4.7 (2,341 reviews)", "★★★★★ 4.6 (1,892 reviews)", "★★★★☆ 4.5 (3,104 reviews)"
- Price: "$348", "$379", "$549"
- Original prices with strikethrough where applicable: "$399" for Sony, "$429" for Bose
- "Add to Cart" button per product (solid #7C3AED purple-600, white text, 8px radius)
- Color swatches below button: Sony (Black, Silver, Midnight Blue), Bose (Black, White Smoke, Lunar Blue), Apple (Space Gray, Silver, Sky Blue, Midnight, Starlight)
- Sticky behavior: on scroll, header row compresses to product name + price + "Add to Cart" mini bar
- Label column stays empty in header row (aligns with spec rows below)
4. QUICK VERDICT BANNER
- Full-width card below header, light purple background (#F5F3FF)
- "🏆 Our Pick: Sony WH-1000XM5" in bold
- "Best overall value with top-tier noise cancellation, 30-hour battery, and the lightest build at 250g. Save $51 vs retail."
- "Read full review →" link
- Small print: "Verdict based on TechVault editorial testing, not influenced by brand partnerships"
5. KEY SPECS COMPARISON TABLE
- Alternating row backgrounds: white and #F8FAFC
- Label column (left): spec name in medium-weight text
- Value cells: centered text, with green checkmark ✓ or red ✗ for boolean features
- **Highlight differences**: when values differ across products, the best value gets a subtle green background (#F0FDF4) with a small "Best" badge
Rows:
- **Price**: $348, $379, $549
- **Noise Cancellation**: Adaptive ANC, Adaptive ANC, Active ANC — all ✓
- **Battery Life**: 30 hours (Best ✓), 24 hours, 20 hours
- **Weight**: 250g (Best ✓), 250g (Best ✓), 384g
- **Driver Size**: 30mm, 35mm (Best ✓), 40mm (Best ✓)
- **Bluetooth Version**: 5.3, 5.3, 5.0
- **Codec Support**: LDAC, SBC, AAC | aptX Adaptive, SBC, AAC | AAC only
- **Multipoint Connection**: ✓, ✓, ✗
- **Wired Option**: 3.5mm included, 3.5mm included, Lightning cable (adapter needed)
- **Foldable**: ✓, ✓, ✗
- **Carrying Case**: Included (slim), Included (hard shell), Smart Case (included)
- **Water/Sweat Resistance**: IPX4 (Best ✓), None ✗, None ✗
- **Transparency Mode**: ✓, ✓, ✓
- **Spatial Audio**: ✓ (360 Reality Audio), ✓ (Immersive Audio), ✓ (Dolby Atmos, Best ✓)
- **Voice Assistant**: Google, Alexa, Siri | Google, Alexa | Siri only
- **App Support**: Sony Headphones Connect, Bose Music, Apple Settings (limited)
- **Warranty**: 1 year, 1 year, 1 year
6. RATING BREAKDOWN COMPARISON
- Headline: "How They Rate"
- Side-by-side horizontal bar charts for each category (5-star scale):
- Sound Quality: Sony 4.8, Bose 4.7, Apple 4.8
- Noise Cancellation: Sony 4.9, Bose 4.8, Apple 4.6
- Comfort: Sony 4.7, Bose 4.6, Apple 4.3
- Battery Life: Sony 4.8, Bose 4.5, Apple 4.2
- Build Quality: Sony 4.5, Bose 4.6, Apple 4.9
- Value for Money: Sony 4.7, Bose 4.4, Apple 3.8
- Bar colors: Sony (#2563EB blue), Bose (#059669 emerald), Apple (#6B7280 gray)
- Winner badge on highest bar per category
7. PROS & CONS SECTION
- 3 columns, one per product
- Each column:
- Product image (small, 60px) + name
- Pros list (green ✓ prefix):
- Sony: "Industry-leading ANC", "30-hour battery", "Lightweight (250g)", "LDAC hi-res audio", "Multipoint Bluetooth"
- Bose: "Best-in-class comfort", "aptX Adaptive codec", "CustomTune sound calibration", "Excellent call quality", "Premium carrying case"
- Apple: "Seamless Apple ecosystem", "Best build quality", "Dolby Atmos spatial audio", "Computational audio processing", "Premium materials (aluminum, steel)"
- Cons list (red ✗ prefix):
- Sony: "Plastic build feels less premium", "Touch controls can be finicky", "Call quality just average"
- Bose: "No water resistance", "Shorter battery (24h)", "Heavier than Sony"
- Apple: "Heaviest option (384g)", "No multipoint", "Expensive at $549", "Lightning connector (adapter needed)", "Limited EQ controls"
- Cards with 12px radius, 1px border
8. EXPERT MINI-REVIEWS
- 3 review cards (one per product) in a horizontal row
- Each card:
- Product name + score badge (e.g., "9.2/10")
- 3-line expert summary: "The XM5 continues Sony's dominance in the ANC space. It's lighter, quieter, and longer-lasting than the competition — and at $348, it's the best value in premium wireless headphones."
- "Read Full Review →" link
- Reviewer avatar + name: "Alex Chen, Audio Editor"
- White cards, subtle shadow, 12px radius
9. USER REVIEW HIGHLIGHTS
- Headline: "What Buyers Say"
- One featured review per product (horizontal cards):
- Sony: "Upgraded from XM4 — the difference in noise cancellation on my daily commute is night and day. Battery lasts my entire work week." — ★★★★★ Michael R., verified buyer
- Bose: "Most comfortable headphones I've ever worn. The immersive audio mode makes movies feel like a theater." — ★★★★★ Sarah T., verified buyer
- Apple: "If you're all-in on Apple, these are magical. The seamless switching between my iPhone, iPad, and MacBook is worth the premium." — ★★★★☆ David L., verified buyer
10. "BEST FOR" RECOMMENDATION CARDS
- 3 cards side by side:
- "Best Overall" → Sony WH-1000XM5 — "Top noise cancellation, longest battery, best price" — "Add to Cart" CTA
- "Best for Comfort" → Bose QuietComfort Ultra — "Plush fit for all-day wear, excellent sound" — "Add to Cart" CTA
- "Best for Apple Users" → Apple AirPods Max — "Seamless ecosystem integration, premium build" — "Add to Cart" CTA
- Each card: product icon, award badge, headline, one-liner, CTA
- Light purple background (#F5F3FF), 12px radius, purple left border accent (4px, #7C3AED)
11. FAQ SECTION
- Headline: "Common Questions"
- Accordion items:
- "Which headphones have the best noise cancellation?" → "In our testing, the Sony WH-1000XM5 edges out the competition with its Integrated Processor V2 and 8 microphones..."
- "Are these headphones good for working out?" → "Only the Sony WH-1000XM5 has IPX4 water/sweat resistance..."
- "Can I use these headphones wired?" → "Yes — Sony and Bose include 3.5mm cables. Apple uses Lightning..."
- "Which headphones are best for phone calls?" → "The Bose QuietComfort Ultra leads in call quality..."
- "Do any of these support lossless audio?" → "The Sony XM5 supports LDAC for near-lossless streaming..."
12. RECENTLY VIEWED & CROSS-SELLS
- Headline: "You May Also Like"
- 4 product cards (horizontal scroll):
- "Sony WF-1000XM5 Earbuds" — $278 — ★ 4.6 — "In-ear alternative"
- "Bose QuietComfort Earbuds II" — $249 — ★ 4.5
- "Sennheiser Momentum 4" — $299 — ★ 4.4
- "Audio-Technica ATH-M50xBT2" — $179 — ★ 4.3
- Each card: image, name, price, rating, "Add to Cart" outline button
13. FOOTER
- 4 columns on #F8FAFC:
- Shop: All Categories, New Arrivals, Best Sellers, Sale, Gift Cards
- Help: Customer Service, Shipping & Returns, Warranty Info, Order Tracking, FAQs
- About: Our Story, Reviews Policy, Affiliate Program, Blog, Careers
- Connect: Newsletter signup input + button, social icons (Instagram, YouTube, Twitter, TikTok)
- Payment icons: Visa, Mastercard, Amex, PayPal, Apple Pay, Google Pay, Klarna
- "© 2026 TechVault. All rights reserved." + Privacy · Terms · Accessibility
Design: Clean, data-forward, scannable. Primary: #7C3AED (purple-600 for CTAs and accents), secondary: #1A1A2E (near-black for headings), body text: #475569 (slate-600). Success green: #10B981 for "Best" badges and pros. Error red: #EF4444 for cons. Backgrounds: white for comparison table rows, #F8FAFC for alternating rows. Typography: Inter for everything — weights 400 (body), 500 (specs), 600 (product names, prices), 700 (headings). Table cells vertically centered, generous padding (16px). Green highlight cells (#F0FDF4) for best-in-category values. Sticky product header with z-index layering for smooth scroll experience.
Responsive: Mobile-first. On screens under 768px, the comparison table switches to a horizontal-scroll layout with the first product column visible and swipe to see others. Sticky header shows 1 product at a time with left/right arrows to switch. "Best For" cards stack vertically. Pros/cons stack vertically. Add "Compare at a glance" toggle that shows only rows where products differ. Filter sidebar for mobile: chips to toggle which specs to show. All touch targets 44px minimum. Bottom sticky bar with "Add to Cart" for the currently viewed product.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