E-commerce website design: a practical guide from homepage to checkout

Most online stores don’t lose sales on the homepage. They lose them a few screens later: a filter that resets on a phone, a search that finds nothing for a misspelt product, a delivery charge that first appears at payment. E-commerce website design is the work of making each of those moments easy.

This guide follows a store in the order a shopper meets it, from homepage to parcel, drawing on published usability research and the W3C’s WCAG 2.2 accessibility standard. The principles behind what makes a good website all apply, with less room for error.

The short answer

Good e-commerce website design gives each stage of the shopping journey one clear job:

• Homepage and navigation: show what you sell, then get people into the right category or search.
• Category pages and filters: narrow a range to a few products worth opening, as easily on a phone as on a desktop.
• Site search: understand typos, synonyms and model numbers.
• Product pages: answer fit, total cost, delivery, returns and trust before the add-to-cart button.
• Cart and checkout: no late costs, no forced account, few fields.
• After the sale: confirm the order, keep people informed, make returns and reorders easy.

Underneath it all sit complete product data, fast pages and accessibility.

E-commerce website design starts with these decisions

Business decisions shape a store more than taste does. Settle these in writing first.

Do you need a full store at all?

A cart suits fixed-price products that people buy without talking to you. Manufacturers and distributors who negotiate prices and quantities are often better served by a product catalogue with request-for-quote, and businesses that sell appointments may only need bookings with deposits or payment links. A store you don’t need is still a store you have to run.

The rest of the brief

Product data deserves the most time. Filters can only use attributes that exist, so if half your products have no size or material recorded, no design will fix it. Our comparison of WordPress, Wix and Shopify covers the platform choice.

Homepage and navigation: help people start looking

Many shoppers never see the homepage; they land on a category or product page from search, ads or social posts. So its job is narrow: confirm what you sell and why to buy here.

• Show the range in the first screen on a phone. A lifestyle photo with a vague slogan tells a newcomer nothing.
• State the promises that decide purchases: delivery cost and speed, returns and how to get help, as facts rather than slogans.
• Offer clear ways in: main categories, bestsellers or new arrivals, and search.
• Skip the auto-rotating carousel. Nielsen Norman Group’s research found auto-rotating slides easy to miss and frustrating, and WCAG requires a way to pause automatic movement lasting more than five seconds.

Navigation that matches how shoppers think

Name categories in customers’ words, not your warehouse’s: “running shoes” beats “performance footwear”. Keep the top level short, group mega menus under clear headings, and list a product in two categories if people look for it in both. If many shoppers search, give phones an open search box, not just an icon.

Category pages, filters and site search

Category page design

Each product tile needs enough to decide whether to click: a clear image, the name, the price (a “from” price when variants differ), the attribute that matters most in that category, such as colours or capacity, and stock status where relevant.

• Sort by what people use: price, newest, bestselling, and relevance on search results.
• Choose how more products load. Baymard Institute’s research has tended to favour a “Load more” button over numbered pages, and over endless scrolling, which keeps the footer out of reach. Whichever you choose, give each set of results its own crawlable address, because Google’s crawlers don’t click buttons to load more.
• Keep text above the grid short; useful category copy can sit below it.
• Respect the back button. Returning from a product should restore the list, the scroll position and the filters.

Product filters on mobile

Filters turn 400 products into 12 worth comparing. Test yours on a phone:

• Filters match how customers choose (size, fit, compatibility, price), not how stock is organised.
• Each value shows how many products it returns, so nobody lands on zero results.
• Shoppers can pick several values in one filter, such as two sizes.
• The filter drawer’s button shows the result count (“Show 38 products”).
• Applied filters appear as removable chips above the results.
• Screen readers announce the new result count without moving focus, as WCAG’s Status Messages criterion (4.1.3) requires.

Filter combinations can also create thousands of URLs; e-commerce SEO covers which deserve indexing.

E-commerce site search

People who search usually know what they want, so a failed search is a lost sale disguised as a visit. Good site search tolerates typos, plurals and synonyms (“sofa” and “couch”), finds products by SKU or model number, suggests products and categories as people type, and works in the language of the page. A no-results page should offer close matches, popular categories and a way to ask.

Check it yourself. Make sure site search is switched on in GA4’s enhanced measurement settings (it detects searches from the page address, such as ?s=) and read a month of queries. The searches that return nothing are your to-do list.

Product pages: answer every question before the button

A product page does a shop assistant’s job. Shoppers want to know what it is, whether it suits them, the total cost, when it will arrive, whether they can return it and whether they can trust the shop.

That means photos showing scale and detail, a variant picker that marks out-of-stock options before they are chosen, delivery cost and an arrival estimate near the price, a plain returns summary, scannable specifications and reviews. On a phone, keep the price, chosen variant and add-to-cart button within easy reach, and confirm clearly when something is added. E-commerce product page design takes each question in turn.

Cart and checkout: remove doubt, then get out of the way

Some abandoned carts are harmless: people save items or compare prices. For the rest, Baymard Institute’s checkout surveys keep finding causes that stores create: extra costs revealed late, forced account creation, a long or complicated checkout and doubts about payment security.

The cart

• Show the full cost early, including delivery (or a clear estimate) and any taxes or duties.
• Let people change quantities and variants, or remove items, without leaving the page.
• Keep the promo code field modest; a big empty box sends people without a code off to hunt for one.
• Save the cart if someone leaves.

The checkout

1. Offer guest checkout, then suggest creating an account after the order, with details already filled in.
2. Ask only for what fulfilment needs. Tuck optional fields, such as a second address line, behind a link.
3. Let the browser help. Correct autocomplete attributes let phones fill in names, addresses and cards, and meet WCAG’s Identify Input Purpose criterion (1.3.5).
4. Don’t ask twice. Offer a pre-ticked “billing same as delivery” box; WCAG 2.2’s Redundant Entry criterion (3.3.7) requires details already given in the same process to be filled in or selectable.
5. Put errors beside the field in plain words, and never clear what someone has typed.
6. Let people review the order and final total before it’s placed. A review step is one way to meet WCAG’s Error Prevention criterion for financial transactions (3.3.4).
7. Offer the payment methods customers expect through your provider’s hosted payment page or fields, so card numbers never touch your server, and keep third-party scripts on checkout pages to a minimum: injected card-skimming code is a well-documented attack.

If you sell to consumers in the European Union, the European Accessibility Act has applied to many online shops since 28 June 2025, with an exemption for the smallest service businesses, so accessibility can be a legal duty as well as good design. Checkout optimisation covers each step in depth.

After the sale: where repeat customers are won

• Confirmation page and email: order number, items, total, delivery address, expected delivery date and next steps.
• Order tracking that works without logging in.
• Returns as easy to start as the purchase, with the policy linked from product pages, the cart and the footer.
• Reorders: order history and saved addresses for repeat and trade customers.
• One review request, sent after delivery.

Track the journey with GA4’s recommended e-commerce events, such as view_item, add_to_cart, begin_checkout and purchase, to see which stage loses people. E-commerce conversion rate explains how to measure it consistently, and the conversion rate optimisation guide sets out a cycle for improving it.

Why stores are harder to keep fast

A brochure site can serve most pages from a cache. Carts, checkout and account pages are personal to each shopper and generated fresh, so hosting and database speed matter more. Stores also gather weight: product photos uploaded at camera size, apps for reviews, wishlists and chat that add scripts to every page, and a tracking tag for every ad channel.

Set targets against Google’s Core Web Vitals: Largest Contentful Paint of 2.5 seconds or less, Interaction to Next Paint of 200 milliseconds or less and Cumulative Layout Shift of 0.1 or less, at the 75th percentile of page loads. Test category and product templates, not just the homepage, and make every new app earn its place.

Every guide in the e-commerce series

Frequently asked questions

What pages does an e-commerce website need?

A homepage, category pages, product pages, search results, a cart, a checkout and an order confirmation. Add delivery, returns, terms of sale, privacy and contact pages, and a way for customers to track orders.

How is designing an online store different from a business website?

A business website usually leads to one action, such as an enquiry. A store supports browsing, comparing and buying across many products, so product data, search and checkout matter as much as looks.

Which platform is best for an online store?

It depends on catalogue size, integrations, how much checkout control you need and who runs the store day to day. Hosted platforms such as Shopify are quicker to start; self-hosted WooCommerce on WordPress gives more control but needs more upkeep.

Where to start

Walk through your own store on a phone as a first-time customer: search for a product, filter a category, add something to the cart and go as far as payment. Note every pause and surprise. That list, read with your analytics, beats any template gallery as a brief.

For an outside view, a free website audit shows how quickly your key pages load on an ordinary phone connection, how the store holds up on a small screen and how visible it is in Google, before you change anything.