E-commerce app design has one job: get people to buy stuff. Every design decision either helps that happen or gets in the way.
This guide covers the patterns that work, based on what major shopping apps do and what conversion research suggests.
The core screens
Every shopping app needs these. Get them right before worrying about anything else.
Product listing (browse)
Where users discover products. The goal: help users find what they want and convince them to tap.
┌─────────────────────────────────────┐
│ 🔍 Search Filters Sort ↓ │
├─────────────────────────────────────┤
│ ┌─────────┐ ┌─────────┐ │
│ │ Image │ │ Image │ │
│ │ │ │ │ │
│ ├─────────┤ ├─────────┤ │
│ │ Name │ │ Name │ │
│ │ $29.99 │ │ $34.99 │ │
│ │ ★★★★☆ │ │ ★★★★★ │ │
│ └─────────┘ └─────────┘ │
│ ┌─────────┐ ┌─────────┐ │
│ │ ... │ │ ... │ │
└─────────────────────────────────────┘
What matters:
Image quality is everything. Bad product photos kill sales. Images should be large enough to see detail, with consistent backgrounds and lighting.
Price visibility. Users filter by price mentally. Hide it and they'll leave to find apps that show it.
Social proof nearby. Star ratings or review counts help users trust unfamiliar products.
Grid vs list. Two-column grid for visual products (fashion, home goods). List for technical products where specs matter (electronics).
Product detail page (PDP)
Where the buying decision happens. This page needs to close the deal.
┌─────────────────────────────────────┐
│ [Product Images] │
│ ○ ○ ● ○ ○ │
├─────────────────────────────────────┤
│ Product Name That Might Be Long │
│ ★★★★☆ (2,451 reviews) │
│ │
│ $49.99 was $69.99 (29% off) │
│ │
│ Color: [Navy] [Black] [Gray] │
│ Size: [S] [M] [L] [XL] │
│ │
│ ┌─────────────────────────────┐ │
│ │ Add to Cart - $49.99 │ │
│ └─────────────────────────────┘ │
│ │
│ 📦 Free shipping over $50 │
│ ↩️ Free returns within 30 days │
│ │
│ Description ▼ │
│ Reviews (2,451) ▼ │
│ Shipping Info ▼ │
└─────────────────────────────────────┘
What matters:
Hero image swipeable. Multiple angles, zoom capability. Users want to examine products before buying.
Price and add-to-cart always visible. These are the conversion elements. Never hide them.
Variant selection clear. Which color? Which size? Make selection obvious and easy to change.
Trust signals. Shipping info, return policy, security badges. Remove purchase anxiety.
Reviews accessible. Don't hide social proof. Surface it prominently.
Cart
Where users review before committing. Keep it simple—complexity causes abandonment.
┌─────────────────────────────────────┐
│ Cart (3 items) │
├─────────────────────────────────────┤
│ ┌─────┐ Product Name │
│ │ Img │ Color: Navy / Size: M │
│ └─────┘ $49.99 [- 1 +] 🗑️ │
├─────────────────────────────────────┤
│ ┌─────┐ Another Product │
│ │ Img │ ... │
│ └─────┘ $29.99 [- 1 +] 🗑️ │
├─────────────────────────────────────┤
│ Subtotal $79.98 │
│ Shipping Free │
│ Estimated Tax $6.40 │
│ ───────────────────────────────── │
│ Total $86.38 │
├─────────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ Checkout - $86.38 │ │
│ └─────────────────────────────┘ │
│ Continue Shopping │
└─────────────────────────────────────┘
What matters:
Easy quantity changes. Plus/minus buttons that work. Item removal shouldn't require confirmation for single items.
Price breakdown clear. Subtotal, shipping, tax—no surprises at checkout.
Savings shown. If they're getting a deal, tell them.
Persistent checkout button. As they scroll, the checkout CTA should stay visible.
Checkout
The conversion gauntlet. Every extra step loses customers.
Best practice: Single page checkout when possible. Progress indicator if multi-step is unavoidable.
Step 1: Shipping
┌─────────────────────────────────────┐
│ Shipping Address │
│ │
│ [Saved addresses ▼] │
│ │
│ Name: [___________________] │
│ Address: [___________________] │
│ City: [_______] State: [__] │
│ ZIP: [_____] │
│ │
│ [ Continue to Payment ] │
└─────────────────────────────────────┘
Step 2: Payment
┌─────────────────────────────────────┐
│ Payment Method │
│ │
│ ○ Credit Card ● Apple Pay ○ PayPal │
│ │
│ [Apple Pay selected - one tap] │
│ │
│ [ Review Order ] │
└─────────────────────────────────────┘
What matters:
Guest checkout. Forcing account creation kills conversions. Let people buy first, offer account after.
Saved information. Returning users should never re-enter shipping or payment.
Multiple payment options. Apple Pay, Google Pay, PayPal—every payment method you support increases conversion.
Progress indication. If checkout has steps, show where users are.
Order summary visible. Users want to verify what they're buying throughout checkout.
See it in action: Try our e-commerce app design generator to create a complete shopping app UI in minutes — no design experience required.
Patterns that boost conversion
These aren't mandatory, but they work.
Urgency and scarcity
"Only 3 left" and "Sale ends in 2:34:15" drive action. Use carefully—fake urgency erodes trust.
┌─────────────────────────────────────┐
│ ⚡ Only 3 left in stock │
│ 🔥 15 people viewing this now │
└─────────────────────────────────────┘
Persistent cart indicator
Show cart item count in the navigation. It's a reminder that they have unfinished business.
┌─────────────────────────────────────┐
│ Logo Search 🛒 (3) │
└─────────────────────────────────────┘
Recently viewed
People browse, leave, and come back. Make it easy to find what they were looking at.
┌─────────────────────────────────────┐
│ Recently Viewed │
│ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │
│ │ │ │ │ │ │ │ │ → │
│ └───┘ └───┘ └───┘ └───┘ │
└─────────────────────────────────────┘
Smart recommendations
"Frequently bought together" and "You might also like" increase average order value.
┌─────────────────────────────────────┐
│ Complete the look │
│ ┌───┐ ┌───┐ ┌───┐ │
│ │ + │ │ + │ │ │ = $149 │
│ └───┘ └───┘ └───┘ │
│ [Add all 3 to cart] │
└─────────────────────────────────────┘
Saved/wishlist
Not everyone buys immediately. Let them save for later.
┌─────────────────────────────────────┐
│ [♡ Save] [Add to Cart] │
└─────────────────────────────────────┘
Quick view
On product listings, let users see key details without leaving the page.
Long press or "Quick View" button:
┌─────────────────────────────────────┐
│ ─── (bottom sheet handle) │
│ │
│ [Image] Product Name │
│ $49.99 │
│ Color: [●] [●] [●] │
│ Size: [S] [M] [L] │
│ │
│ [Add to Cart] [View Full Details] │
└─────────────────────────────────────┘
Search and discovery
Users with intent convert higher than browsers. Help them find what they want.
Search bar
Prominent, always accessible. Autocomplete with product suggestions.
┌─────────────────────────────────────┐
│ 🔍 Search for products... │
├─────────────────────────────────────┤
│ Recent: running shoes, blue jacket │
├─────────────────────────────────────┤
│ Popular: summer dresses, sneakers │
└─────────────────────────────────────┘
Filters that work
Bad filtering is worse than no filtering.
Good filters:
- Category
- Price range (slider)
- Size
- Color (visual swatches)
- Rating (4 stars & up)
- Availability (in stock)
Filter UX:
- Show result count as filters are applied
- Easy to clear all filters
- Remember filter state during session
Sort options
- Relevance (default for search)
- Price: low to high
- Price: high to low
- Rating
- Newest
- Best selling
Many of these patterns overlap with broader mobile UI patterns for 2026 — cards, bottom sheets, pull-to-refresh — adapted for a shopping context.
Mobile-specific considerations
Thumb-friendly checkout
Checkout buttons should be easy to reach. Bottom of screen, full width.
One-tap payments
Apple Pay and Google Pay reduce checkout to a single biometric authentication. Conversion rates jump significantly.
Sticky add-to-cart
On product pages, keep the add-to-cart button visible during scroll.
┌─────────────────────────────────────┐
│ [Scrolling content above] │
├─────────────────────────────────────┤
│ $49.99 [ Add to Cart ] │ ← Fixed at bottom
└─────────────────────────────────────┘
Pull-to-refresh on listings
Users expect to refresh product lists by pulling down.
Cart access from anywhere
Floating cart button or persistent nav item. Users should never wonder how to see their cart.
Design for trust
E-commerce lives or dies on trust. Unknown shops need more trust signals than established brands.
Include:
- Secure checkout indicators (lock icons, https)
- Payment method logos
- Return/refund policy visibility
- Customer reviews with photos
- Contact information accessible
- Clear shipping estimates
Example trust bar:
┌─────────────────────────────────────┐
│ 🔒 Secure checkout 📦 Free returns │
│ 💳 Payment options ⭐ 4.8/5 rating │
└─────────────────────────────────────┘
Generating e-commerce designs with AI
E-commerce patterns are well-established. AI tools handle them well. You can describe your store and generate a full set of screens in minutes.
Example prompt:
Design a fashion e-commerce app for a women's clothing brand.
Screens needed:
1. Home with featured collections and new arrivals
2. Product listing with 2-column grid and filters
3. Product detail with image gallery, size selection, and reviews
4. Shopping cart with quantity controls
5. Checkout with saved addresses and Apple Pay
Style: Minimal and premium. White background, black text, with brand color (#C9A87C) for accents. Photography-focused—let the clothes be the star.
Target audience: Women 25-40 interested in contemporary fashion.
Then iterate:
Add a "Complete the look" section on the product detail page showing complementary items.
Common mistakes
Hidden prices
Some apps hide prices until product pages. Bad idea. Users filter by price mentally; hiding it wastes their time and yours.
Complicated checkout
Every field you add loses customers. Ask only what's necessary. Autofill where possible.
Poor product photos
No amount of good UI compensates for bad product photography. This is table stakes.
No guest checkout
"Create account to continue" during checkout is a conversion killer. Let people buy first.
Broken search
Search that doesn't find products—or returns irrelevant results—sends users elsewhere.
Small touch targets
"Add to Cart" buttons that are hard to tap. Quantity steppers too small to use. This stuff matters on mobile.
Measuring success
Design decisions should connect to metrics:
- Conversion rate: Visitors who buy
- Cart abandonment rate: People who add items but don't complete checkout
- Average order value: How much people spend
- Product detail page conversion: PDP views to add-to-cart
- Time to purchase: How long the buying journey takes
Design changes should move these numbers. If they don't, reconsider.
Conclusion
E-commerce design is functional design. Pretty doesn't matter if people can't buy. Focus on reducing friction, building trust, and making products look appealing.
The patterns here are proven by billions of transactions. Start with them, then optimize based on your specific audience and products.
Related reading:
- Mobile UI Patterns 2026 - Navigation and interaction patterns
- App Onboarding Design Examples - 15 patterns that convert
- How to Design a Mobile App with AI - Complete AI design workflow