Create an E-Commerce Product Page Wireframe Specification

Build a detailed e-commerce product page wireframe spec optimized for conversions with mobile adaptations.

πŸ“ The Prompt

You are a conversion-focused UX designer. Create a detailed wireframe specification for a high-converting e-commerce product page selling [PRODUCT_CATEGORY] items on a [PLATFORM_TYPE] store. The average order value is [AOV] and the target customer is [CUSTOMER_PROFILE]. Structure the wireframe spec from top to bottom: 1. **Above-the-Fold Layout**: Define the exact placement of: - Product image gallery (number of images, zoom behavior, video support, thumbnail layout) - Product title, price display (sale price formatting, currency), and star rating placement - Variant selectors (size, color, material) with their UI patterns (dropdowns, swatches, buttons) - Add-to-cart button (size, color, sticky behavior on mobile) - Urgency/scarcity elements (stock indicator, countdown timer placement) 2. **Trust & Social Proof Section**: Specify placement for: - Trust badges and security icons - Shipping and return policy highlights - Customer review summary with photo reviews - "Customers also bought" or "Frequently bought together" module 3. **Product Information Tabs/Accordion**: Design the content sections for: - Description (formatting guidelines, ideal word count) - Specifications/details table - Shipping information - Customer reviews (sorting, filtering, pagination) 4. **Cross-Sell & Upsell Modules**: Define 2-3 recommendation sections with carousel behavior, card design, and placement logic. 5. **Mobile-Specific Adaptations**: Describe how each section reflows on mobile, including sticky add-to-cart bar, swipeable image gallery, and collapsible sections. 6. **Conversion Micro-Copy**: Write 5-7 examples of persuasive micro-copy for key touchpoints (CTA button, scarcity message, guarantee badge, shipping threshold). Include annotations explaining the conversion rationale behind each design decision.

πŸ’‘ Tips for Better Results

Keep the add-to-cart button visible at all timesβ€”use a sticky bar on mobile for maximum conversion. Place your strongest social proof (review count, star rating) directly next to the price to reduce purchase anxiety. Test your above-the-fold layout with a 5-second test to ensure key information is immediately scannable.

🎯 Use Cases

E-commerce managers, Shopify store owners, and UX designers use this when building or optimizing product pages to maximize add-to-cart rates and reduce bounce.

πŸ”— Related Prompts

🎨 Design intermediate

UI/UX Design Review Checklist

Get a comprehensive UI/UX review covering hierarchy, accessibility, and responsiveness.

🎨 Design intermediate

Generate a Custom Color Palette for Any Brand or Project

Generate a complete, accessible color palette with HEX values, usage guidelines, and dark mode variants for any brand or project.

🎨 Design intermediate

Find the Perfect Typography Pairing for Your Design Project

Get expert typography pairing recommendations with type scales, spacing guidelines, and CSS fallback stacks for any design project.

🎨 Design advanced

Build Comprehensive Design System Documentation

Create complete design system documentation with tokens, component specs, accessibility standards, and contribution guidelines.

🎨 Design advanced

Create a Detailed Component Library Specification Document

Build a comprehensive component library spec with variants, props, accessibility rules, and code examples for your design system.

🎨 Design advanced

Create a Detailed Wireframe Description for UI/UX Design

Generate a detailed, section-by-section wireframe description with layout specs, interaction flows, and responsive behavior for any page.