UI/UX Design

E-Commerce Product Page UX Optimization

Describe your product type and get a complete e-commerce product page UX spec - from hero image gallery to purchase flow to cross-sells.

By The Prompt Black Magic Team

Paste into any LLM with your product details. Use the output to redesign your product pages or brief your design team.

You are a conversion-focused e-commerce UX designer who has optimized product pages for brands generating $100M+ in annual online revenue.

Product type: [APPAREL/ELECTRONICS/BEAUTY/FOOD/FURNITURE/SOFTWARE/SUBSCRIPTION BOX]
Average order value: [UNDER $50/$50-200/$200-1000/$1000+]
Primary device: [MOBILE-FIRST/DESKTOP-FIRST/BALANCED]
Key purchase barrier: [PRICE CONCERN/FIT UNCERTAINTY/TRUST/COMPLEXITY/COMPARISON SHOPPING]
Platform: [SHOPIFY/WOOCOMMERCE/CUSTOM/HEADLESS]

Design a high-converting product page:

**1. Above-the-Fold Layout**
- Image gallery: carousel vs grid, number of images, zoom behavior
- Product title hierarchy and badge placement (New, Sale, Bestseller)
- Price display: regular, sale, per-unit, installment options
- Variant selector: color swatches, size grid, quantity stepper
- Add to cart button: size, color, position, sticky behavior on scroll
- Urgency/scarcity elements: stock level, limited time, viewer count
- Trust signals position: reviews stars, shipping info, return policy icons

**2. Image Gallery UX**
- Primary image requirements (aspect ratio, background, quality)
- Thumbnail navigation (position, count, scroll behavior)
- Mobile: swipe carousel with dot indicators
- Desktop: side thumbnails with hover zoom
- Video placement within gallery
- 360-degree view or AR try-on integration
- User-generated photos section

**3. Product Information Architecture**
- Short description (above fold, 2-3 sentences)
- Feature highlights (icon + short text format)
- Detailed description (below fold, expandable)
- Specifications table (dimensions, materials, care instructions)
- Size guide (pop-up or inline, with fit recommendations)
- FAQ section (product-specific, 5-8 questions)
- Content display: tabs vs accordion vs long scroll decision

**4. Social Proof & Trust**
- Review summary (star average, count, distribution bar)
- Review filtering and sorting (verified, with photos, by rating)
- Individual review layout (stars, text, photos, helpful vote)
- Q&A section (community questions and answers)
- Expert endorsements or certifications
- "As seen in" media mentions

**5. Purchase Enhancement**
- Frequently bought together (bundle suggestion)
- Compare with similar products (feature table)
- Recently viewed carousel
- Wishlist / save for later functionality
- Share button (native share sheet on mobile)
- Back-in-stock notification for sold-out variants

**6. Mobile-Specific Optimizations**
- Sticky add-to-cart bar (bottom of screen)
- Image gallery as full-width swipe
- Collapsible sections for long content
- Quick add from collection pages
- Apple Pay / Google Pay express checkout
- Thumb-zone-aware button placement

**7. Performance Requirements**
- Image lazy loading strategy
- Skeleton screen for initial load
- Above-the-fold content first (defer reviews, suggestions)
- Maximum acceptable load times per section

Specify exact measurements, behaviors, and interaction details. Include A/B testing suggestions for uncertain decisions.

When to Use This Prompt

Expected Results

How to Customize This Prompt