🎨 AiPro Institute™ Prompt Library
Digital UI/UX & Web Design
🛒 E-commerce Homepage
High-Converting Online Store Homepage with Product Discovery & Checkout Flow
🛠️ Tool Compatibility
📝 The Prompt
Design a high-converting e-commerce homepage for:
🎯 Store Identity & Context:
• Store Name: [Brand Name]
• Product Category: [Fashion & Apparel / Electronics / Home & Garden / Beauty & Cosmetics / Food & Beverage / Sports & Outdoors / Books / Handmade/Artisan]
• Target Audience: [Demographics, shopping behavior, price sensitivity]
• Brand Positioning: [Luxury / Affordable / Eco-friendly / Tech-forward / Minimalist / Trendy]
• Unique Value Proposition: [Free shipping / Best prices / Curated selection / Sustainable / Fast delivery]
🏗️ Homepage Structure (10 Key Sections):
1. Header/Navigation (Sticky Top Bar)
• Logo: [Position: left / centered, Size: 120–150px width]
• Main Navigation: [5–8 categories: Shop / New Arrivals / Sale / About / Contact]
• Search Bar: [Prominent, center or right side, autocomplete suggestions, "Search products..." placeholder]
• Utility Icons: [Account/Login, Wishlist (heart icon), Cart with item count badge]
• Promo Banner Above Header: [Optional — "Free Shipping Over $50" / "20% Off Sitewide — Code: SAVE20"]
2. Hero Section (Above the Fold)
• Layout: [Full-width image/video + text overlay / Split 50/50 image-text / Carousel with 3–5 slides]
• Hero Image: [Lifestyle photo showing product in use / Product close-up / Brand story visual]
• Headline: [Benefit-driven, 5–8 words: "Elevate Your Style with Timeless Pieces"]
• Subheadline: [Supporting text, 10–15 words, clarifies offer]
• CTA Button: [Primary action: "Shop Now" / "Explore Collection" / "Get Started", prominent color, 48px height]
• Auto-Play Carousel: [Yes/No — if yes, 5-second interval, pause on hover, navigation dots]
3. Featured Categories (Quick Navigation)
• Layout: [3–6 category tiles in horizontal grid]
• Category Tile: [Image background, category name overlay, hover effect (zoom/darken)]
• Categories: [Women / Men / Accessories / New Arrivals / Sale / Best Sellers]
• Tile Size: [Equal sizes OR hero tile (larger) + smaller tiles]
4. Featured/Best-Selling Products
• Section Title: ["Best Sellers" / "Trending Now" / "Customer Favorites"]
• Layout: [4-column grid on desktop / 2-column on tablet / 1-column on mobile]
• Product Card Components: [Product image (square ratio), Name, Price, "Add to Cart" button, Star rating (optional), "Sale" badge (if discounted)]
• Hover Effects: [Secondary image on hover / Quick-view modal / Add-to-cart button appears]
• Show: [8–12 products, "View All" link at bottom]
5. Promotional Banner (Mid-Page CTA)
• Layout: [Full-width image banner / Split image-text / Video background]
• Message: ["Limited Time: 30% Off Spring Collection" / "Join Our Loyalty Program — Earn Points on Every Purchase"]
• CTA Button: ["Shop Sale" / "Learn More" / "Sign Up Now"]
• Design Style: [Bold typography, high contrast, urgency indicators (countdown timer optional)]
6. New Arrivals / Seasonal Collection
• Section Title: ["New Arrivals" / "Spring 2026 Collection" / "Just Dropped"]
• Layout: [Horizontal scrollable carousel OR 4-column grid]
• Product Cards: [Same structure as Best Sellers, "New" badge]
• Show: [8–12 products]
7. Social Proof / Testimonials
• Section Title: ["What Our Customers Say" / "Loved by Thousands" / "Real Reviews"]
• Layout: [3-column testimonial cards / Carousel / Masonry grid]
• Testimonial Card: [Customer photo/avatar, Name, Star rating, Review text (2–3 sentences), Product image (optional)]
• Trust Badges: [Below testimonials — "5000+ 5-Star Reviews" / Trustpilot logo / "As Seen In" media logos]
8. Instagram Feed / User-Generated Content
• Section Title: ["Shop Our Instagram" / "#YourBrandName" / "Join the Community"]
• Layout: [4×2 grid of Instagram posts / Carousel of tagged photos]
• Post Display: [Square images, Instagram icon overlay on hover, click to view full post or tag to shop]
• CTA: ["Follow Us on Instagram" button]
9. Value Propositions / Trust Indicators
• Layout: [4-column icon grid / Horizontal banner with icons]
• Icons + Text: [Free Shipping (truck icon), Easy Returns (return arrow), Secure Checkout (lock icon), 24/7 Support (chat icon)]
• Style: [Simple line icons, short headline, 1-line description]
10. Footer (Comprehensive)
• Layout: [4-column grid on desktop / Stacked on mobile]
• Column 1 — About: [Logo, Short brand description, Social media icons]
• Column 2 — Shop: [Links: All Products, New Arrivals, Sale, Gift Cards]
• Column 3 — Customer Service: [Links: Contact, Shipping Info, Returns, FAQ, Size Guide]
• Column 4 — Newsletter Signup: [Email input field, "Subscribe" button, "Get 10% off your first order"]
• Bottom Bar: [Copyright text, Payment method icons (Visa, Mastercard, PayPal, etc.), Legal links (Privacy, Terms)]
🎨 Visual Design System:
1. Color Palette
• Primary Brand Color: [HEX code — CTAs, accents, links]
• Secondary Color: [HEX code — secondary buttons, badges]
• Background: [White #ffffff OR light gray #f9fafb]
• Text Colors: [Headings: #1f2937 dark gray / Body: #4b5563 medium gray / Muted: #9ca3af light gray]
• Sale/Discount Color: [Red #ef4444 OR orange #f59e0b]
2. Typography
• Heading Font: [Playfair Display / Montserrat / Lora — serif or sans-serif depending on brand]
• Body Font: [Inter / Open Sans / Roboto — clean sans-serif]
• Font Sizes: [Hero H1: 48–64px / Section H2: 32–40px / Product name: 16–18px / Body: 16px / Small: 14px]
3. Product Card Design
• Image Aspect Ratio: [1:1 square / 3:4 portrait / 4:3 landscape]
• Image Hover Effect: [Zoom in / Fade to second image / Quick-view overlay]
• Sale Badge: [Top-left corner, red circle, "Sale" OR "-30%" text]
• Wishlist Icon: [Top-right corner, heart outline, fill on click]
• Add to Cart: [Button below price / Icon-only bottom-right / Appears on hover]
• Spacing: [16px padding inside card, 24px gap between cards]
📱 Responsive Design:
• Desktop (1440px+): [4-column product grid, full header, side-by-side sections]
• Tablet (768–1024px): [2–3 column grid, condensed header, stacked sections]
• Mobile (< 768px): [1-column grid, hamburger menu, touch-optimized buttons (48px minimum), sticky "Add to Cart" bar on product pages]
🔧 Conversion Optimization Features:
• Quick Add to Cart: [Add products from homepage without leaving page]
• Persistent Cart Icon: [Always visible with item count, smooth slide-out cart drawer]
• Urgency Indicators: [Low stock warnings: "Only 3 left!" / Countdown timer for sales]
• Exit-Intent Popup: [Offer discount when user moves to close tab: "Wait! Get 10% off your first order"]
• Free Shipping Threshold: [Progress bar in cart: "Add $15 more for free shipping"]
• Product Filters: [Size, Color, Price range, Category — sidebar OR top bar]
• Wishlist Sync: [Save for later across devices, email reminders for price drops]
♿ Accessibility & Performance:
• Page Load Speed: [Target <3 seconds — optimize images (WebP), lazy-load below fold, minify CSS/JS]
• Alt Text: [Descriptive alt text for all product images]
• Keyboard Navigation: [Tab through all interactive elements, Enter to activate]
• Color Contrast: [WCAG AA — 4.5:1 for text, 3:1 for UI elements]
• Mobile Touch Targets: [Minimum 44×44px for buttons, adequate spacing to prevent mis-taps]
✅ Deliverables Required:
1. Complete homepage design (desktop, tablet, mobile breakpoints)
2. Product page template design
3. Cart/checkout flow wireframes
4. Component library (buttons, cards, forms, navigation)
5. Interactive prototype with clickable navigation
6. Design system documentation (colors, typography, spacing)
7. Developer handoff assets (icons, images, CSS specs)
🚀 Output Format:
Deliver a conversion-optimized e-commerce homepage that balances beautiful design with sales psychology, fast performance, and seamless user experience across all devices.
🧠 The Logic: 6 Design Principles
1️⃣ Above-the-Fold Priority
First screen = first impression. Hero must communicate brand + value prop instantly. Clear CTA visible without scrolling. 5-second rule: visitor should know what you sell immediately.
2️⃣ Friction Reduction
Every click is a chance to lose the sale. Quick add-to-cart from homepage. Guest checkout option. Minimize form fields. Fast = conversions.
3️⃣ Social Proof Hierarchy
Trust = sales. Show reviews, ratings, "X customers bought this", UGC from Instagram. Place strategically near CTAs. Testimonials > brand claims.
4️⃣ Scarcity & Urgency
FOMO drives action. "Only 3 left" / countdown timers / "Sale ends tonight". Use ethically — real scarcity only. Fake urgency destroys trust.
5️⃣ Mobile-First Revenue
60%+ of e-commerce traffic = mobile. Design mobile experience first, enhance for desktop. Thumb-friendly buttons, simplified checkout, fast load times.
6️⃣ Visual Hierarchy for Scanning
Users scan, not read. Use size, color, contrast to guide eyes: Hero → Categories → Products → CTA. White space prevents overwhelm.
🎨 Output Preview: 4 Real-World Examples
Example 1: Fashion & Apparel Store (Minimalist)
Hero: Full-width image of model in neutral outfit, headline: "Timeless Essentials, Made Better" — CTA: "Shop Women" / "Shop Men"
Categories: 4 tiles — Women, Men, Sale, New Arrivals (square images with text overlay)
Products: 4-column grid, 8 best-sellers, clean white cards, product image + name + price + rating
Mid-Banner: "Free Shipping + Returns on All Orders" with lifestyle photo background
Social Proof: Instagram feed 4×2 grid, "#EverlaneStyle" hashtag, "Shop the Look" tags
Colors: Black, white, beige, minimal accent colors
Typography: Serif headings (Lora), sans-serif body (Inter)
Example 2: Electronics Store (Tech-Forward)
Hero: Carousel (3 slides) — Slide 1: New laptop launch with specs overlay + "Pre-Order Now", Slide 2: Holiday sale banner, Slide 3: Trade-in program
Categories: 6 tiles — Laptops, Smartphones, Audio, Wearables, Gaming, Accessories
Products: 4-column grid, "Featured Deals" section, red "Save $200" badges, star ratings + review count
Trust Bar: "Free 2-Day Shipping" / "30-Day Returns" / "Price Match Guarantee" / "Expert Support" — icons + text
Comparison Tool: "Compare Products" sticky button sidebar
Colors: Electric blue primary, black, white, neon green accents
Typography: Modern sans-serif (Montserrat), tech-inspired
Example 3: Beauty & Cosmetics (Luxurious)
Hero: Video background (skincare routine timelapse), headline: "Reveal Your Natural Radiance" — CTA: "Discover Your Routine"
Categories: 5 circular image tiles — Skincare, Makeup, Haircare, Fragrance, Gift Sets
Products: 3-column grid (larger product images), hover reveals "Quick Shop" button, ingredient callouts ("Vegan", "Cruelty-Free")
Quiz CTA: Banner — "Find Your Perfect Foundation" with interactive quiz link
Testimonials: Before/after photos, 5-star reviews, beauty influencer endorsements
Colors: Rose gold, blush pink, ivory, soft gray
Typography: Elegant serif (Playfair Display), script accents
Example 4: Artisan/Handmade Marketplace (Warm & Authentic)
Hero: Split layout — Left: lifestyle photo of handmade pottery, Right: "Support Local Artisans — Unique, Handcrafted Goods" + "Shop Collections"
Categories: 4 image tiles with illustrated icons — Home Decor, Jewelry, Art Prints, Ceramics
Products: Masonry grid (varying heights), "Meet the Maker" label with artisan photo, hover reveals story snippet
Story Banner: "Every Purchase Supports Small Businesses" with artisan portraits
Trust Badges: "Ethically Made" / "Small-Batch Production" / "Carbon-Neutral Shipping"
Colors: Terracotta, sage green, cream, warm wood tones
Typography: Handwritten script (Pacifico) for headings, clean sans (Lato) for body
🔗 3-Step Chain Strategy
Step 1: Conversion Research & Wireframing
Prompt: "Conduct competitive analysis for [product category] e-commerce sites. Identify: (1) Common homepage sections (hero, categories, products, testimonials), (2) CTA placements and copy, (3) Trust indicators used, (4) Mobile vs. desktop priorities. Create low-fidelity wireframe for homepage showing 10 key sections in order: Header → Hero → Categories → Featured Products → Promo Banner → New Arrivals → Testimonials → Instagram Feed → Value Props → Footer."
Expected Output: Wireframe with content hierarchy and conversion optimization notes, ready for visual design.
Step 2: High-Fidelity Design Execution
Prompt: "Design high-fidelity e-commerce homepage in [Figma/Sketch] for [store name] selling [product category]. Apply wireframe structure. Brand colors: [HEX codes]. Typography: [fonts]. Include: (1) Hero with headline + CTA, (2) 6 category tiles, (3) 12 product cards in 4-column grid with hover states, (4) Testimonial section, (5) Footer with newsletter signup. Design 3 breakpoints: 1440px desktop, 768px tablet, 375px mobile."
Expected Output: Complete homepage design with all sections, responsive layouts, and polished visuals.
Step 3: Interactive Prototype & Optimization
Prompt: "Create interactive prototype with: (1) Clickable product cards → Product detail page, (2) Add-to-cart animation with cart icon update, (3) Category tile navigation, (4) Sticky header on scroll, (5) Mobile hamburger menu. Add conversion features: Quick-view modal for products, exit-intent popup (10% off), free shipping progress bar in cart. Export developer handoff: CSS color variables, spacing tokens (8px grid), component specs, optimized image assets."
Expected Output: Fully interactive prototype with conversion optimizations and complete developer documentation.
💡 6 HITL (Human-in-the-Loop) Refinement Tips
🎓 AiPro Institute™
Empowering professionals with world-class AI prompt engineering resources
Part of the Digital UI/UX & Web Design Collection
