Whimsical LogoWhimsical LogoWhimsical Logo

Brand
Get all logo versions.
Download

Ecommerce App Template

An ecommerce app template is a set of editable screens for a shopping app, covering how people find products, choose options and follow an order after they pay. This free template wireframes 15 screens from Shop's iOS app: a home feed, deals, categories, a store page, search with filters, product options with Add to cart, saved collections, orders and parcel tracking. Edit it online in Whimsical to plan your store's app before visual design.

Shop's iOS app as editable gray wireframes, from the home feed to a delivered order.

What's included

  • Discovery screens. A home feed, a feed of followed stores, deals by department and an explore page with top-rated and new-in-category rows.
  • Store page and store info. A store header with rating, Follow and promotions, plus a sheet with contact details and shipping, refund and privacy policies.
  • Search with filters. Suggestions as you type, then results with Sort by, On sale, Price and In-stock filters.
  • Product detail and options. Ratings and a spend-and-save offer, then sizes from XXS to XXL, quantity, a low-stock warning, a delivery date and Add to cart or Buy now.
  • Saved items and collections. A saved grid with a Create collection action for grouping products.
  • Orders and tracking. An empty orders state, an order list, tracking with carrier and tracking number, and a delivered screen with Buy again and a review prompt.

Why start from an ecommerce app template?

  • See where browsing turns into buying. Fifteen screens in journey order run from the home feed to Add to cart, then to a delivered order.
  • Borrow patterns that already work. Shop gathers many independent stores in one app, so its store pages, search filters and tracking have to work for any catalog.
  • Put delivery and stock on the product page. The options screen shows a 30% markdown, an 'Almost gone' warning and an 'Arrives as soon as' date right next to the size picker.
  • Plan the screens people forget. An empty orders state, a store policies sheet and a delivered order with a review prompt are already drawn.
  • Change structure, not pixels. Gray boxes keep the review on layout and flow, so nobody spends the meeting on brand colors.

How to use this template

  1. Duplicate the template. Open it in Whimsical and copy the 15 screens into your workspace.
  2. Cut the multi-store screens. A single-brand store can drop the following feed, store page and store info sheet, and keep search, product options and orders.
  3. Add your cart and checkout. The board goes from Add to cart and Buy now straight to orders, so sketch the cart, address and payment steps your store needs.
  4. Swap in your catalog. Replace placeholder products, prices and sizes with real ones, so the layout gets tested against real name lengths.
  5. Share it for comments. Invite your team to comment on the board before anything goes to high-fidelity design.

Ecommerce app vs marketplace app

An ecommerce app sells products from one brand or a curated set of stores, and the business controls the catalog, prices and delivery. A marketplace app connects many independent sellers with buyers, so it needs seller profiles, listings, messaging and trust signals like reviews. Shop sits in between: it gathers independent stores into one app, but each store keeps its own catalog, prices and refund policy.

Frequently asked questions

  • An ecommerce app needs product discovery, search, a product page that answers buying questions, a cart and checkout, and order tracking after purchase. Search results work best with filters for price, sale items and stock, the pattern Nielsen Norman Group describes in its guide to filters and facets. This template covers discovery, search, product options, saved items and orders, but not the cart or checkout.

  • Shop, the shopping and order tracking app from Shopify. It's worth studying because it has to present many independent stores in one consistent way, each with its own catalog and policies. The 15 wireframes were drawn from screenshots on Mobbin and sit beside them, each linked to its source screen. Store names and product photos are gray placeholders, and Whimsical isn't affiliated with Shop or Shopify.

  • Yes. App Wireframe is the open-source agent skill that turned Shop's screens into this template, and it works on other ecommerce apps too. Name one and it pulls the key screens from Mobbin, then rebuilds each as an editable Whimsical wireframe next to its screenshot. You can also give it screenshots of your own store's app. The setup is an AI agent with the Whimsical MCP server, and the Mobbin MCP server when the screens come from Mobbin.

  • Start with the journey. List every screen from first open to delivered order, wireframe each one in grayscale, and check that the product page answers the buying questions: size, price, stock and delivery date. Keep Add to cart within thumb reach. Then test the flow with real products. This ecommerce app template in Whimsical's wireframe editor gives you that journey as a base.

  • Order tracking matches each order to a carrier and tracking number, then shows delivery progress and an arrival estimate that updates in transit. Shop adds orders from its own network automatically and finds others through a connected email account or a tracking number added by hand, as its help center explains. The template's empty orders screen offers both: Connect account and Add a package manually.