WebsiteChatGPT

E-Commerce Product Page

High-converting product detail page with gallery, trust signals, reviews, and upsells — each decision backed by conversion rationale.

#web #ecommerce #cro

Full Prompt

Act as a conversion rate optimisation expert and UI designer. Design a high-converting product detail page for [PRODUCT NAME — e.g. premium leather wallet] priced at [PRICE — e.g. ₹3,499] on a [STORE TYPE — e.g. D2C fashion store].

For every design decision, explain the conversion rationale — why it increases likelihood to purchase.

1. IMAGE GALLERY
• Main image dimensions and aspect ratio
• Thumbnail strip: position (below or side), count, active state
• Zoom on hover: lens-style or expand modal?
• Mobile swipe behaviour
• Image badges: 360 view, video play button
• Lazy load strategy for below-fold thumbnails

2. PRODUCT INFORMATION BLOCK
• Name: font size, weight, max character recommendation
• Rating display: star style, review count link (scrolls to review section)
• Price: current price size, strike-through original, savings badge ("Save 20%")
• Variant selector: colour swatches (how to show out-of-stock), size buttons
• Quantity input: stepper vs. dropdown — recommendation and why
• Add to Cart CTA: exact hex color, size, copy, icon
• Buy Now secondary CTA: visual hierarchy vs. primary
• Wishlist icon: placement and animation
• Stock urgency indicator ("Only 4 left")

3. TRUST SIGNALS ROW
• 4 icons with labels: free shipping threshold, return policy, authenticity guarantee, secure checkout
• Icon style and size
• Placement: above or below CTA? (explain why)

4. PRODUCT DESCRIPTION ACCORDION
• Tabs vs. accordion: recommendation and why
• Sections: Features, Materials, Size Guide, Care Instructions, Shipping & Returns
• Typography for accordion body text

5. REVIEW SECTION
• Overall rating display (large star + breakdown bar chart)
• Filter controls: by star rating, with photos, verified
• Individual review card: avatar, name, rating, date, title, body, photo thumbnails
• Load More vs. pagination
• Write a Review CTA placement

6. UPSELLS & CROSS-SELLS
• Frequently bought together: layout and add-to-bundle mechanic
• Related products carousel: 4 items, card design, hover state
• Recently viewed row

7. MOBILE-SPECIFIC DECISIONS
• Sticky Add to Cart bar on scroll
• Image gallery swipe behaviour
• Accordion vs. tabs on mobile
• Tap target sizes for all interactive elements