Website Examples
Ecommerce Website Examples
Real ecommerce website examples and the store patterns they share — product cards, category navigation, search, and checkout.
An ecommerce website is a storefront on the web: the place where a visitor discovers a product, decides it is worth buying, and moves through product, cart, and checkout to a completed order. This page collects ecommerce website examples and breaks down what each one does with its homepage structure, product cards, category navigation, search and filtering, product-page layout, trust signals, and cart and checkout CTAs, so you can borrow the patterns for your own store. It is part of the website examples library.
Every store is different, but the patterns repeat. Instead of a long article, here are the examples — grouped by industry — plus an anatomy of a store homepage and product page, good vs weak patterns, and a copyable store plan you can fill in.
What is an ecommerce website?
An ecommerce website sells products or services online: visitors browse a catalog, add items to a cart, and complete a purchase at checkout. It is different from a business website (which usually generates leads rather than orders) and from a personal website or portfolio website (which present a person or a body of work).
Most stores are one of a few types:
- Single-brand (direct-to-consumer) — one company sells its own products, like Allbirds or Glossier
- Multi-brand retailer — one store sells many brands, like Crate & Barrel
- Marketplace — many sellers list products on one platform
- Wholesale / B2B — ordering for businesses, often by account or minimum quantity
- Physical-store companion — a brick-and-mortar shop's online ordering arm
Ecommerce vs business vs personal vs portfolio
| Type | Primary job | Typical visitor action | Example |
|---|---|---|---|
| Ecommerce website | Sell products online | Add to cart, check out | This page |
| Business website | Explain the company and generate leads | Call, book, request a quote | Business examples |
| Personal website | Present an individual | Contact, follow, hire | Personal examples |
| Portfolio website | Showcase a body of work | View work, hire | Portfolio examples |
A store is built around the buying flow. Even a one-product store needs four things: a way to browse or find the product, a product page that removes doubt, a cart that holds the choice, and a checkout that collects payment. Everything else — the hero, the trust signals, the brand storytelling — exists to push the visitor through those four steps.
The anatomy of an ecommerce homepage
Most store homepages use the same skeleton, in the same order. Here is an original mockup of a typical single-brand store showing the sections every example on this page reuses in some form:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Northlight Goods</title>
<style>
:root { --accent: #1f5c3f; --ink: #1b1f1d; --muted: #6b7280; --line: #e3e6e1; --bg: #fafaf8; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--bg); }
.announce { text-align: center; font-size: 13px; padding: 8px; background: var(--ink); color: #fff; }
header { display: flex; align-items: center; gap: 20px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.logo { font-weight: 800; letter-spacing: -0.02em; font-size: 18px; }
nav a { margin-right: 16px; color: var(--ink); text-decoration: none; font-size: 14px; }
nav a:hover { color: var(--accent); }
.search { flex: 1; max-width: 420px; }
.search input { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.cart { font-size: 14px; font-weight: 600; }
.cart b { background: var(--accent); color: #fff; border-radius: 999px; padding: 1px 7px; margin-left: 4px; font-size: 12px; }
.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; padding: 48px 24px; max-width: 1080px; margin: 0 auto; }
h1 { font-size: 38px; line-height: 1.1; margin: 0 0 12px; letter-spacing: -0.02em; }
.hero p { color: var(--muted); margin: 0 0 24px; max-width: 44ch; }
.btn { display: inline-block; background: var(--accent); color: #fff; padding: 12px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.hero-visual { background: #e9ece6; border-radius: 12px; min-height: 220px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
section { max-width: 1080px; margin: 0 auto; padding: 24px; }
h2 { font-size: 22px; margin: 0 0 4px; }
.sub { color: var(--muted); margin: 0 0 20px; font-size: 14px; }
.tiles, .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile { border: 1px solid var(--line); border-radius: 10px; padding: 28px 16px; text-align: center; font-weight: 600; }
.card { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #fff; }
.thumb { background: #eef0ec; border-radius: 8px; height: 150px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.card h3 { font-size: 14px; margin: 10px 0 2px; }
.price { font-size: 14px; }
.stars { color: #d97706; font-size: 13px; }
.add { margin-top: 8px; background: var(--ink); color: #fff; border: 0; border-radius: 8px; padding: 8px; width: 100%; font-weight: 600; cursor: pointer; }
.trust { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; }
.trust span { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 14px; text-align: center; font-size: 13px; }
.news { text-align: center; background: var(--ink); color: #fff; padding: 40px 24px; margin-top: 40px; }
.news input { padding: 10px 12px; border: 0; border-radius: 8px; width: 260px; max-width: 80%; }
.news button { padding: 10px 16px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 600; }
footer { padding: 24px; text-align: center; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
@media (max-width: 760px) {
.hero { grid-template-columns: 1fr; padding: 28px 16px; }
.tiles, .grid { grid-template-columns: repeat(2, 1fr); }
nav { display: none; }
}
</style>
</head>
<body>
<div class="announce">Free shipping on orders over $75 · 30-day returns</div>
<header>
<span class="logo">Northlight Goods</span>
<nav>
<a href="#categories">New</a>
<a href="#categories">Women</a>
<a href="#categories">Men</a>
<a href="#categories">Home</a>
<a href="#categories">Sale</a>
</nav>
<div class="search"><input type="search" aria-label="Search products" /></div>
<div class="cart">Bag <b>2</b></div>
</header>
<div class="hero">
<div>
<h1>Everyday goods, made to last</h1>
<p>Thoughtful clothing and home basics, designed to be worn and used for years.</p>
<a class="btn" href="#categories">Shop the new collection</a>
</div>
<div class="hero-visual">Product photography</div>
</div>
<section id="categories">
<h2>Shop by category</h2>
<p class="sub">Jump straight to what you need.</p>
<div class="tiles">
<div class="tile">New arrivals</div>
<div class="tile">Women</div>
<div class="tile">Men</div>
<div class="tile">Home</div>
</div>
</section>
<section>
<h2>Bestsellers</h2>
<p class="sub">The pieces customers keep coming back for.</p>
<div class="grid">
<div class="card">
<div class="thumb">Product image</div>
<h3>Wool Overshirt</h3>
<div class="price">$128 <span class="stars">★ 4.8</span></div>
<button class="add">Add to cart</button>
</div>
<div class="card">
<div class="thumb">Product image</div>
<h3>Canvas Tote</h3>
<div class="price">$42 <span class="stars">★ 4.9</span></div>
<button class="add">Add to cart</button>
</div>
<div class="card">
<div class="thumb">Product image</div>
<h3>Ceramic Mug Set</h3>
<div class="price">$36 <span class="stars">★ 4.7</span></div>
<button class="add">Add to cart</button>
</div>
<div class="card">
<div class="thumb">Product image</div>
<h3>Field Jacket</h3>
<div class="price">$185 <span class="stars">★ 4.8</span></div>
<button class="add">Add to cart</button>
</div>
</div>
</section>
<section>
<div class="trust">
<span>Free shipping over $75</span>
<span>30-day returns</span>
<span>Secure checkout</span>
<span>4.8 average rating</span>
</div>
</section>
<div class="news">
<h2>Get 10% off your first order</h2>
<p>Join the list for early access and restock alerts.</p>
<input type="email" aria-label="Email address" />
<button>Sign up</button>
</div>
<footer>© Northlight Goods · Contact · Shipping · Returns · Privacy · Terms</footer>
</body>
</html>
The sections in order:
- Announcement bar — one line above the header: a shipping threshold, a promotion, or a trust note
- Header — logo, category navigation, search, and a cart icon with an item count
- Hero — one headline, a subheadline, and a primary CTA into the catalog
- Category tiles — a grid that routes visitors by product type
- Featured products — a grid of product cards
- Trust strip — guarantees, reviews, payment badges, and return policy
- Closing CTA / newsletter — a reason to stay in touch
- Footer — links, policies, contact, and payment and security badges
The two pieces worth studying hardest are the product card — the compact unit that earns the click — and the trust signals that answer "can I buy here safely?" For the wireframe version of this skeleton, see the website wireframe example page.
The anatomy of a product card and product page
A product card is the small unit that appears in grids and search results; a product page is the full page where a purchase happens. Both carry the same core information. Here is an original mockup of a product page:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Wool Overshirt — Northlight Goods</title>
<style>
:root { --accent: #1f5c3f; --ink: #1b1f1d; --muted: #6b7280; --line: #e3e6e1; --bg: #fafaf8; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--bg); }
header { display: flex; align-items: center; gap: 20px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.logo { font-weight: 800; letter-spacing: -0.02em; font-size: 18px; }
nav a { margin-right: 16px; color: var(--ink); text-decoration: none; font-size: 14px; }
.cart { margin-left: auto; font-size: 14px; font-weight: 600; }
.wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1080px; margin: 0 auto; padding: 32px 24px; }
.crumbs { font-size: 13px; color: var(--muted); margin: 24px auto 0; max-width: 1080px; padding: 0 24px; }
.crumbs a { color: var(--muted); }
.gallery-main { background: #e9ece6; border-radius: 12px; height: 360px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.thumbs { display: flex; gap: 8px; margin-top: 8px; }
.thumbs div { width: 60px; height: 60px; background: #eef0ec; border-radius: 8px; }
h1 { font-size: 28px; margin: 0 0 6px; letter-spacing: -0.01em; }
.price { font-size: 20px; font-weight: 700; margin: 0 0 10px; }
.stars { color: #d97706; font-size: 14px; }
.desc { color: var(--muted); font-size: 15px; line-height: 1.5; }
.field { margin: 20px 0; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.opts { display: flex; gap: 8px; }
.opt { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.opt.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.qty { display: flex; align-items: center; gap: 12px; }
.qty button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 16px; }
.buy { display: flex; gap: 12px; margin-top: 24px; }
.btn { flex: 1; border: 0; border-radius: 8px; padding: 14px; font-weight: 700; font-size: 15px; cursor: pointer; }
.add { background: var(--accent); color: #fff; }
.checkout { background: var(--ink); color: #fff; }
details { border-top: 1px solid var(--line); padding: 14px 0; font-size: 14px; }
summary { font-weight: 600; cursor: pointer; }
details p { color: var(--muted); margin: 8px 0 0; }
.reviews { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 16px; }
.review { font-size: 14px; color: var(--muted); border-left: 3px solid var(--line); padding-left: 12px; margin: 10px 0; }
.related h2 { font-size: 20px; }
.r-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.r-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: #fff; }
.r-card .thumb { background: #eef0ec; border-radius: 8px; height: 110px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; }
.r-card h3 { font-size: 13px; margin: 8px 0 2px; }
.r-card .price { font-size: 13px; }
footer { padding: 24px; text-align: center; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 40px; }
@media (max-width: 760px) {
.wrap { grid-template-columns: 1fr; padding: 24px 16px; }
.r-grid { grid-template-columns: repeat(2, 1fr); }
nav { display: none; }
}
</style>
</head>
<body>
<header>
<span class="logo">Northlight Goods</span>
<nav><a href="#">Women</a><a href="#">Men</a><a href="#">Home</a></nav>
<div class="cart">Bag <b>2</b></div>
</header>
<div class="crumbs"><a href="#">Men</a> / <a href="#">Jackets</a> / Wool Overshirt</div>
<div class="wrap">
<div>
<div class="gallery-main">Main product photo</div>
<div class="thumbs"><div></div><div></div><div></div><div></div></div>
</div>
<div>
<h1>Wool Overshirt</h1>
<div class="price">$128 <span class="stars">★ 4.8 (214 reviews)</span></div>
<p class="desc">A heavyweight wool overshirt cut for layering, made in a responsible mill.</p>
<div class="field">
<label>Colour</label>
<div class="opts"><span class="opt on">Charcoal</span><span class="opt">Olive</span><span class="opt">Stone</span></div>
</div>
<div class="field">
<label>Size</label>
<div class="opts"><span class="opt">S</span><span class="opt on">M</span><span class="opt">L</span><span class="opt">XL</span></div>
</div>
<div class="field">
<label>Quantity</label>
<div class="qty"><button>-</button><span>1</span><button>+</button></div>
</div>
<div class="buy">
<button class="btn add">Add to cart</button>
<button class="btn checkout">Buy now</button>
</div>
<details open><summary>Details</summary><p>100% wool, made in a responsible mill. Machine wash cold, lay flat to dry.</p></details>
<details><summary>Shipping and returns</summary><p>Free shipping over $75. 30-day returns with a prepaid label.</p></details>
<details><summary>Stock</summary><p>In stock — ships within 1 to 2 business days.</p></details>
<div class="reviews">
<h2>What customers say</h2>
<p class="review">"Warm, structured, and fits true to size." — M. Chen</p>
<p class="review">"My favourite layer all winter." — S. Alvarez</p>
</div>
</div>
</div>
<section class="related">
<div style="max-width:1080px;margin:0 auto;padding:0 24px">
<h2>You may also like</h2>
<div class="r-grid">
<div class="r-card"><div class="thumb">Product image</div><h3>Field Jacket</h3><div class="price">$185</div></div>
<div class="r-card"><div class="thumb">Product image</div><h3>Canvas Tote</h3><div class="price">$42</div></div>
<div class="r-card"><div class="thumb">Product image</div><h3>Merino Beanie</h3><div class="price">$28</div></div>
<div class="r-card"><div class="thumb">Product image</div><h3>Wool Scarf</h3><div class="price">$48</div></div>
</div>
</div>
</section>
<footer>© Northlight Goods · Contact · Shipping · Returns · Privacy · Terms</footer>
</body>
</html>
What a product card shows:
- A product photo
- The product name
- The price
- A star rating and review count
- Add to cart (or quick view)
- Optional badges: sale, new, back in stock, bestseller
What a product page adds:
- A larger gallery with multiple angles and zoom
- Variant pickers for size, colour, and material
- Quantity and add to cart
- Buying details: shipping, returns, stock status
- Reviews with photos from customers
- Cross-sell or "you may also like" products
Clean URL structure matters more for a store than for most sites: a readable product URL such as /products/wool-overshirt/ instead of /product?id=482 helps shoppers and search engines alike. See the website URL examples page for the pattern. The HTML that carries this layout is covered on the HTML website example page, and the responsive behaviour on phones is covered on the responsive website example page.
Ecommerce website examples by industry
The real examples below are well-known stores, and each card is limited to what is publicly observable on the store: structure, navigation, product cards, trust signals, and checkout CTAs. Nothing here states traffic, revenue, or business results. Store types that no single public site can fairly represent — marketplaces, wholesale, physical-store companions, and print-on-demand — are shown as clearly labelled illustrative patterns built from the common structure of that store type.
Apparel and footwear
Nike — sportswear and footwear
| Field | Observation |
|---|---|
| Industry | Apparel and footwear |
| Store type | Single-brand retailer with in-season campaigns |
| Homepage structure | Campaign hero → category shortcuts → product stories → new arrivals → footer |
| Category navigation | Top-level tabs for shop-by-gender and sport (New, Women, Men, Kids, Sale) with a large category menu |
| Search and filtering | Search with autocomplete; product lists filter and sort by size, colour, price, and sport |
| Product cards | Photo, name, price, and colour options; alternate views appear on hover |
| Product-page layout | Gallery, size picker, quantity, add to cart or buy now, and delivery and returns accordions |
| Trust signals | Member benefits (free returns and early access), real product photography, and reviews |
| Cart and checkout | Cart icon with a live count, guest checkout offered alongside member perks |
| Mobile pattern | Single-column browsing, sticky add-to-cart, and tap-friendly size options |
| What to learn | Offer guest checkout to reduce friction while reserving perks for members |
Allbirds — sustainable footwear and apparel
| Field | Observation |
|---|---|
| Industry | Footwear and apparel |
| Store type | Single-brand, sustainability-led direct-to-consumer |
| Homepage structure | Editorial hero → material story → product categories → featured shoes → footer |
| Category navigation | Shop by category (Women, Men, Kids, Sale) plus a dedicated sustainability section |
| Search and filtering | Search plus filters by size, colour, and product type |
| Product cards | Photo, name, price, and a material call-out used as the selling point |
| Product-page layout | Gallery, size guide with fit notes, colour picker, add to cart, and material and care details |
| Trust signals | Material transparency, sustainability claims, and reviews with fit feedback |
| Cart and checkout | Cart icon with a live count and shipping-offer messaging |
| Mobile pattern | Sticky cart and category menus sized for a thumb |
| What to learn | Make material and sourcing a core part of the product story rather than a footnote |
Gymshark — fitness apparel
| Field | Observation |
|---|---|
| Industry | Fitness apparel |
| Store type | Single-brand direct-to-consumer |
| Homepage structure | Rotating offer bar → campaign hero → shop by activity or goal → new drops → social proof → footer |
| Category navigation | Shop by category and by goal or sport, with a persistent offer bar on top |
| Search and filtering | Search plus filters and sorting by product type |
| Product cards | Photo, name, price, and quick add-to-bag with colour options |
| Product-page layout | Gallery, size and colour selection, add to cart, sizing info, and reviews |
| Trust signals | User-generated customer photos, review ratings, and community-driven content |
| Cart and checkout | Cart icon with a live count and promotions shown in the announcement bar |
| Mobile pattern | Mobile-first layout built around social-feed integration |
| What to learn | Turn customers' own photos into the main proof on product pages |
Beauty and personal care
Glossier — skincare and makeup
| Field | Observation |
|---|---|
| Industry | Beauty |
| Store type | Single-brand direct-to-consumer built on community |
| Homepage structure | Editorial hero → bestsellers → product categories → brand story → footer |
| Category navigation | Shop by product type with a clean, minimal menu |
| Search and filtering | Simple search; browsing leans on curated collections rather than heavy filters |
| Product cards | Photo, name, and price with clean styling; colour options reveal on hover |
| Product-page layout | Gallery with customer photos beside professional shots, shade options, add to bag, and reviews |
| Trust signals | Customer photos on product pages, review counts, and community-led content |
| Cart and checkout | Bag icon with a live count and a low-friction checkout |
| Mobile pattern | Clean single-column product pages with large tap targets |
| What to learn | Put real customer photos beside product shots so shoppers can picture the result |
Aesop — skincare and body care
| Field | Observation |
|---|---|
| Industry | Beauty and personal care |
| Store type | Premium single-brand retailer |
| Homepage structure | Editorial, magazine-like layout with staggered blocks and curated product storytelling |
| Category navigation | Product categories appear directly in the menu, with some products shoppable from navigation |
| Search and filtering | Minimal search; discovery leans on editorial curation |
| Product cards | Calm typography with product name, size, and price, presented with restraint |
| Product-page layout | Gallery, ingredient and usage detail, pairing suggestions, and add to cart |
| Trust signals | Editorial presentation and ingredient transparency |
| Cart and checkout | Cart icon with a live count and a quiet, clean checkout |
| Mobile pattern | Staggered editorial blocks collapse to a single column |
| What to learn | Restraint and good typography can make a premium brand feel premium online |
Bite Toothpaste Bits — sustainable oral care
| Field | Observation |
|---|---|
| Industry | Sustainable personal care |
| Store type | Single-brand direct-to-consumer |
| Homepage structure | Hero → product line → subscription options → sustainability story → footer |
| Category navigation | A short menu organised around the few products and their subscription options |
| Search and filtering | Small catalog; discovery is mostly the homepage flow |
| Product cards | Photography that blends into the page background, with name, price, and subscription choice |
| Product-page layout | Gallery, flavour and subscription options, add to cart, and sustainability details |
| Trust signals | Sustainability messaging repeated in headings, testimonials, and CTAs, plus review ratings |
| Cart and checkout | Cart with subscription reminders and a standard checkout |
| Mobile pattern | Full-bleed product photography that works on small screens |
| What to learn | A small catalogue can feel premium when photography and messaging are consistent |
Home, lifestyle and accessories
Crate & Barrel — furniture and home goods
| Field | Observation |
|---|---|
| Industry | Home and furniture |
| Store type | Multi-brand home retailer |
| Homepage structure | Hero → category blocks → featured collections → trade and services → footer |
| Category navigation | Mega menu with subcategories and photos; breadcrumbs on category pages |
| Search and filtering | Detailed filtering and sorting by category, price, material, and feature |
| Product cards | Photo, name, and price with quick actions like add to cart or add to a list |
| Product-page layout | Gallery, options, add to cart, delivery and assembly info, and reviews |
| Trust signals | Reviews, financing options, and delivery commitments |
| Cart and checkout | Cart icon with a live count and clear shipping and financing steps |
| Mobile pattern | Collapsible mega menu and filter sheets on small screens |
| What to learn | Large catalogues need mega menus, breadcrumbs, and strong filtering to stay findable |
Bellroy — wallets, bags and carry goods
| Field | Observation |
|---|---|
| Industry | Accessories and carry goods |
| Store type | Single-brand direct-to-consumer |
| Homepage structure | Studio product shot beside a lifestyle shot → product categories → feature stories → footer |
| Category navigation | Shop by product type (wallets, bags, accessories) with clear submenus |
| Search and filtering | Simple search plus filters by type and colour |
| Product cards | Photo, name, price, and interactive product demonstrations such as sliders and animated explainers |
| Product-page layout | Gallery with animated feature demos, variants, add to cart, and materials and care details |
| Trust signals | Materials transparency, ethical-sourcing notes, and review ratings |
| Cart and checkout | Cart icon with a live count and a standard checkout |
| Mobile pattern | Animated demos trimmed to lightweight motion on mobile |
| What to learn | Show the product doing its job — a slider revealing card access — instead of only describing it |
Heveya — mattresses and bedding
| Field | Observation |
|---|---|
| Industry | Home and sleep |
| Store type | Premium single-brand direct-to-consumer |
| Homepage structure | Hero → material and transparency story → mattress lineup → video tours → footer |
| Category navigation | Shop by product (mattresses, bedding, pillows) with comparison-style pages |
| Search and filtering | Small catalogue; product finders and guides carry discovery |
| Product cards | Photo, name, price, and the key material facts |
| Product-page layout | Material-first layout explaining each layer, video showroom tours, "look inside" details, and add to cart |
| Trust signals | Material transparency, showroom presence, video tours, and reviews |
| Cart and checkout | Cart icon with a live count and a standard checkout |
| Mobile pattern | Long-form product pages that read cleanly on a phone |
| What to learn | For high-consideration products, detailed material and try-before-you-buy content reduces hesitation |
Specialty and outdoor
Patagonia — outdoor clothing and gear
| Field | Observation |
|---|---|
| Industry | Outdoor apparel and gear |
| Store type | Single-brand retailer with mission-led storytelling |
| Homepage structure | Mission and campaign stories above product grids → categories → repairs and activism → footer |
| Category navigation | Shop by category (Men, Women, Kids, Gear, Sale) alongside mission content |
| Search and filtering | Contextual filters by activity type, material, and feature |
| Product cards | Photo, name, price, and material or feature call-outs |
| Product-page layout | Gallery, size and colour, add to cart, material and sourcing details, and reviews |
| Trust signals | Environmental and supply-chain transparency plus repair and used-gear programmes |
| Cart and checkout | Cart icon with a live count and a standard checkout |
| Mobile pattern | Single-column product grids and sticky add-to-cart |
| What to learn | A strong mission can be the main differentiator if the store still makes buying easy |
Zenni — affordable eyewear
| Field | Observation |
|---|---|
| Industry | Eyewear |
| Store type | Single-brand direct-to-consumer, technology-led |
| Homepage structure | Hero → categories by frame type → virtual try-on promotion → featured styles → footer |
| Category navigation | Shop by category and frame type with clear filtering |
| Search and filtering | Strong filtering by shape, size, colour, and price, plus guided lens customisation |
| Product cards | Photo, name, price, and frame features |
| Product-page layout | Gallery, virtual try-on, step-by-step lens configuration, add to cart, and reviews |
| Trust signals | Try-before-you-buy tools, review ratings, and price transparency |
| Cart and checkout | Cart with lens configuration carried through and a standard checkout |
| Mobile pattern | Try-on and customisation flows built for a phone camera |
| What to learn | A tool that removes the biggest purchase hesitation — how will it look? — does more than any discount |
Notebook Therapy — stationery and lifestyle goods
| Field | Observation |
|---|---|
| Industry | Stationery and lifestyle |
| Store type | Single-brand direct-to-consumer with limited drops |
| Homepage structure | Hero → seasonal collections → product categories → social feed → footer |
| Category navigation | Shop by product type (notebooks, pens, stickers, washi tape) with playful branding |
| Search and filtering | Simple search plus filters by category and collection |
| Product cards | Photo, name, price, and badges such as "back in stock" or "limited" |
| Product-page layout | Gallery, options, add to cart, stock and drop messaging, and reviews |
| Trust signals | Limited-edition urgency, a community social feed, and review ratings |
| Cart and checkout | Cart icon with a live count and a standard checkout |
| Mobile pattern | Playful product cards that stay readable on mobile |
| What to learn | Limited drops and clear stock messages turn routine shopping into an event |
Marketplaces and other store types — illustrative patterns
These cards are not real companies. They are illustrative patterns built from the common structure of each store type, so the observations are about the pattern, not a specific business.
Marketplace — illustrative pattern
| Field | Pattern |
|---|---|
| Industry | Multi-seller marketplace |
| Store type | Platform where many sellers list products |
| Homepage structure | Search-led hero → category tiles → featured sellers and products → footer |
| Category navigation | Broad categories with deep filters such as price, brand, seller rating, and shipping |
| Search and filtering | Search is the primary navigation; filters dominate product lists |
| Product cards | Photo, name, price, seller rating, and a shipping note |
| Product-page layout | Seller information, variants, buyer reviews, and add to cart |
| Trust signals | Seller ratings and review counts plus buyer-protection promises |
| Cart and checkout | One cart across sellers, combined checkout, and multiple payment options |
| Mobile pattern | A search- and filter-first mobile flow |
| What to learn | When choice is huge, search and trusted filters matter more than homepage storytelling |
Wholesale / B2B store — illustrative pattern
| Field | Pattern |
|---|---|
| Industry | Business-to-business |
| Store type | Account-based ordering for businesses |
| Homepage structure | Login and account entry → product catalogue → re-order shortcuts → trade terms → footer |
| Category navigation | Catalogue grouped by category with trade-specific attributes |
| Search and filtering | Search plus filters by quantity breaks, SKU, and category |
| Product cards | Photo, name, SKU, unit price, and minimum order quantity |
| Product-page layout | Bulk quantity boxes, trade pricing, delivery lead time, and add to cart |
| Trust signals | Trade terms, account quotes, and delivery commitments |
| Cart and checkout | Quoted pricing carries into checkout, with purchase orders or invoicing |
| Mobile pattern | Re-order lists and quick-reorder buttons |
| What to learn | For B2B, showing unit price and order minimums early beats lifestyle storytelling |
Physical-store companion — illustrative pattern
| Field | Pattern |
|---|---|
| Industry | Local retail or hospitality |
| Store type | A brick-and-mortar shop's online ordering arm |
| Homepage structure | Hero with a "shop online or visit us" split → products → store info and hours → footer |
| Category navigation | A small catalogue grouped by product type |
| Search and filtering | Simple search; most visitors browse by category |
| Product cards | Photo, name, price, and local pickup or delivery options |
| Product-page layout | Gallery, options, add to cart, pickup versus delivery choice, and store details |
| Trust signals | Store photos, reviews, address and hours, and local pickup availability |
| Cart and checkout | A clear pickup or delivery choice at checkout and local payment options |
| Mobile pattern | Map, hours, and click-to-call near the top |
| What to learn | Online and offline should cross-reference each other so a local shopper trusts both |
Print-on-demand / small DTC starter — illustrative pattern
| Field | Pattern |
|---|---|
| Industry | Small-batch direct-to-consumer |
| Store type | A lean store run by one person or a small team |
| Homepage structure | Hero → bestsellers → product categories → about and values → footer |
| Category navigation | A short menu of a few categories |
| Search and filtering | Minimal; the catalogue is small enough to browse |
| Product cards | Photo, name, price, and stock or production time |
| Product-page layout | Gallery, size and colour options, add to cart, and production and shipping time |
| Trust signals | Reviews, order-time transparency, and a simple return policy |
| Cart and checkout | Few steps, guest checkout, and standard payment options |
| Mobile pattern | A lean single-column store that loads fast |
| What to learn | A small store can compete on speed, clarity, and honest order times rather than breadth |
Good vs weak ecommerce patterns
The examples below are illustrative patterns, not real companies. They show the difference between a store that leaves a shopper unsure and one that makes buying obvious.
| Instead of this (weak) | Try this (stronger) | Why |
|---|---|---|
| Product cards with no price | Always show the price on the card | Price is the first thing shoppers compare; hiding it forces a click to find out |
| A cart icon with no item count | A cart icon with a live item count | The count confirms the product actually went into the cart |
| No search on a large catalogue | A visible search box with autocomplete | When the catalogue is large, search is the fastest path to a product |
| One long list of products | Category tiles and filtering | Grouping by type turns a wall of options into a short decision |
| A product page with only one photo | A gallery with multiple angles and zoom | Shoppers cannot touch the product; more views remove doubt |
| No reviews anywhere | Reviews with photos from customers | Real customer photos are the strongest proof a stranger will see |
| Size options only after adding to cart | A size picker directly on the product page | Missing size information is a top reason for abandoned carts |
| Checkout that demands an account | Guest checkout as an option | Every extra required step loses shoppers who just want to pay |
| Free-shipping details hidden in the footer | The free-shipping threshold in the announcement bar | A visible threshold nudges small orders toward a higher basket |
| A store that breaks on mobile | A mobile layout with large tap targets and a sticky cart | Most shopping happens on phones; a broken mobile store loses those shoppers |
Copyable ecommerce website plan template
Use the anatomy above as a skeleton and fill in this template with your own store. A filled example lives at the top of this page in the two mockups; this is the blank version you can copy and edit.
# Ecommerce website plan
## About the store
- Store name: [Store name]
- One-line description: [What you sell, for whom, and what makes you different]
- Product line: [The 2-5 categories you sell]
- Contact email: [Email address]
## Goal of the store (pick one primary)
- [ ] Sell products online (single-brand)
- [ ] Sell many brands under one roof (retailer)
- [ ] Sell to other businesses (wholesale / B2B)
- [ ] Take orders for a physical store
- [ ] Other: _____
## Pages (sitemap)
- Homepage
- Product category pages, one per category: [Category name]
- Product pages, one per product
- About / brand story
- Contact
- Policies: shipping, returns, privacy, terms
- Other: _____
## Homepage sections (in order)
1. Announcement bar: [Free shipping threshold or current offer]
2. Header: logo, [Category navigation], search, cart icon with item count
3. Hero: headline = [What you sell in one line],
subheadline = [Who it is for],
CTA button = [Shop now / Shop the collection]
4. Category tiles: 3-6 tiles routing by product type
5. Featured products: a grid of [4-8] product cards
6. Trust strip: [Guarantees, reviews, payment badges, returns]
7. Newsletter / closing CTA: [Reason to stay in touch]
8. Footer: links, policies, contact, payment and security badges
## Product card checklist
- [ ] Product photo (square, consistent background)
- [ ] Product name
- [ ] Price
- [ ] Star rating and review count
- [ ] Add to cart (or quick view)
- [ ] Badges as needed: sale, new, back in stock
## Product page checklist
- [ ] Gallery with multiple angles and zoom
- [ ] Variant pickers (size, colour, material)
- [ ] Quantity and add to cart
- [ ] Shipping, returns, and stock status
- [ ] Reviews with customer photos
- [ ] Cross-sell or related products
## Navigation and findability
- [ ] Category menu groups every product
- [ ] Search box with autocomplete for large catalogues
- [ ] Filters and sorting on category pages
- [ ] Breadcrumbs on category and product pages
- [ ] Clean URLs like /products/[product-name]/
## Trust signals to include
- [ ] Reviews with real names or photos
- [ ] Star ratings on product cards
- [ ] Guarantees and return policy
- [ ] Secure checkout badges and payment logos
- [ ] Stock and shipping time honesty
## Cart and checkout
- [ ] Cart icon with a live item count
- [ ] Cart page or drawer that shows the total
- [ ] Guest checkout option
- [ ] Clear checkout steps with progress
- [ ] Shipping and tax shown before payment
## Mobile checks
- [ ] Single-column layout on small screens
- [ ] Large tap targets for buttons and sizes
- [ ] Sticky add-to-cart on product pages
- [ ] Cart accessible from every page
- [ ] Fast on a real phone
## Final checks
- [ ] Every page has a title and meta description
- [ ] Product and category URLs are clean and readable
- [ ] Contact details match your listings
- [ ] Live on a secure https:// address
- [ ] Test the whole flow: find, product, cart, checkout
FAQ
Frequently asked questions
What is an example of an ecommerce website?
A real online store that sells products through a catalog, cart, and checkout. The apparel, beauty, home, and specialty stores on this page — like Nike, Glossier, Crate & Barrel, and Patagonia — are everyday examples. Each card on this page breaks down the store's homepage structure, product cards, navigation, search and filtering, product-page layout, trust signals, and cart and checkout CTAs.
What are the main types of ecommerce websites?
The common types are single-brand direct-to-consumer stores (one company selling its own products), multi-brand retailers, marketplaces (many sellers on one platform), wholesale or B2B stores, and physical-store companions. Each type is covered on this page, with the last four shown as clearly labelled illustrative patterns.
How many pages does an ecommerce website need?
Start with the core set: a homepage, category pages, product pages, a cart, a checkout, and your policies (shipping, returns, privacy, terms). From there, add pages that serve a real job — an about page, a size guide, or a help page. A store with a few strong pages beats a big one full of thin pages.
What is a product card?
The small unit that appears in product grids and search results. It usually shows a photo, the product name, the price, a star rating, and an add-to-cart action, with badges for things like sale or back in stock. It is the element that earns the click to the product page.
What makes a good ecommerce product page?
A good product page removes doubt: a gallery with multiple angles, clear variants (size, colour, material), a visible price and add-to-cart button, shipping and returns information, stock status, and reviews with customer photos. It answers the questions a shopper cannot ask in person.
What is the difference between an ecommerce website and a business website?
An ecommerce website sells products online with a catalog, cart, and checkout, while a business website usually generates leads — calls, bookings, and enquiries. Many companies do both. The [business website examples](/business-website-examples/) page covers the lead-generation side.
Where to go next
An ecommerce website is one of the most pattern-driven sites on the web, because every store repeats the same buying flow. Start from the store plan above, then look at the pages that carry it: website structure examples for the sitemap, website name examples and website title examples for the words, and the business, personal, and portfolio examples for the neighbouring formats. Mobile behaviour matters more for stores than almost anything else, so the responsive website example is worth a close read. If you build stores for a living, the website proposal example, website audit report example, and website maintenance plan example pages show the documents around the project.