Answer in brief
Design an online store along the shopper’s route: homepage, navigation and search, category lists, product page, cart, checkout and the messages after the order. Each page has one job. Research from Baymard Institute shows where stores lose buyers, while Core Web Vitals, WCAG 2.2 and, in the EU, the European Accessibility Act set limits the design has to meet.
Ecommerce website design follows the shopper’s route through the store
Ecommerce website design is easiest to judge page by page, in the order a shopper meets them: homepage or search result, category list, product, cart, checkout, confirmation. Each page has one job, and a beautiful store can still fail at any single step. Baymard Institute, a research group that tests online stores with real users, rates the homepage and category navigation of the average top-grossing US and European site as poor. In its benchmark, 76% of sites perform at mediocre or worse.
The homepage has a narrower job than most owners expect. It shows at a glance what the store sells, opens the main categories, offers search and states the delivery and returns terms. It does not need the founding story or a carousel of five banners. Many shoppers never see it: search results and ads send them straight to a category or product.
Navigation, category tree and on-site search for an online shop
Category names should be the words customers use, and the shopper should always see where they are. Baymard’s 2026 mobile benchmark found that 94% of mobile sites do not highlight the current scope in the main navigation. It also found that 42% offer no “View all” option at each level of the catalogue. A breadcrumb trail and a “View all” link at the top of each category close both gaps.
Search is the second front door. In Baymard’s testing, 34% of users searched for things that are not products, such as the return policy, yet 15% of benchmarked sites do not support those basic queries. On mobile, 27% of sites have no submit button beside the search field and 28% give no useful suggestion for a closely misspelled term. Test search with the ten words your customers really type, wrong spellings included.
Category and listing pages: filters, sorting and thumbnails
The product list is where stores lose people quietly. Baymard’s listings study saw abandonment of 67–90% on sites with mediocre list usability, against 17–33% on sites with a slightly better toolset. Its 2025 benchmark puts 58% of desktop and 78% of mobile sites at mediocre or worse. The test is whether a shopper can narrow two hundred items to five.
The fixes are specific. Combine the colour and size variations of one product into a single list item, which 42% of sites do not do, and show three or more thumbnails per item, which 80% do not. Let shoppers pick two values of one filter at once and show applied filters above the list. Offer the four sorting types users looked for in testing, price, user rating, best selling and newest, which 69% of sites lack in part.
Google Search Central covers the technical side. Its pagination guide says Google’s crawlers do not click buttons, so “load more” or infinite scroll needs real links to numbered pages, each with its own URL such as ?page=2. It advises keeping filtered and re-sorted lists out of the index with noindex or robots.txt rules. The brief should say which list views are meant to be found in search.
Ecommerce product page design: images, variants, price and returns
Ecommerce product page design answers what a shopper would ask an assistant in a physical shop. Baymard’s latest product page benchmark finds that only 48% of leading desktop sites and 38% of mobile sites reach a decent or good level. In testing, 42% of users tried to judge a product’s size from the photos, which is hard without an image in scale, next to a hand or in a room. And 23% of sites lack a picture on a human model.
Variants should be chosen with buttons, yet 57% of sites do not use buttons for size selection. Price, stock and the buy button belong in one block, with an estimate of the total cost including delivery, which 67% of sites do not give. Delivery options, cost and timing depend on the destination and the exact address, so ask for a postcode or country and show a date. Baymard’s checkout research counts 48% of sites that show a speed instead of a delivery date.
Returns information belongs on the product page itself. In a Baymard study of 1,032 respondents, 60% said they look for the return policy there, yet 44% of sites neither show nor link to it. Google’s URL guide asks for each variant to have its own address, such as /t-shirt/green or /t-shirt?color=green. One template that bakes in these rules saves fixing hundreds of pages later.
Ecommerce checkout design: guest checkout, form fields and total cost
Checkout is the most studied part of ecommerce website design, because its losses are easy to count. Baymard’s list of 50 studies puts the average documented cart abandonment rate at 70.22%. Setting aside those only browsing, the top reasons are extra costs (40%), slow delivery (20%), distrust of the site with card details (19%), a required account (18%) and a checkout that was too long (17%). Another 12% could not see the total cost up front.
Baymard’s testing shows that an ideal checkout can have 12–14 form elements, while the average US checkout shows 23.48 by default. Guest checkout should be the most prominent option, and 62% of sites fail to make it so. Mark both required and optional fields, because 32% of participants missed a required field when only optional ones were labelled. If you ask for a phone number, say why, since over 70% of surveyed shoppers are reluctant to give one.
Many checkouts break on error messages. Baymard counts 94% of sites without adaptive messages, the kind that name the real problem, such as a phone number being too short. An address lookup catches typos before a parcel goes astray, and 54% of mobile sites have none. Baymard estimates the average large store could gain a 35.26% increase in conversion rate through better checkout design alone.
Cart, accounts, trust pages and the messages after an order
The cart shows each item with its variant and picture, a quantity control, the delivery estimate and the total. Baymard finds that 97% of sites do not use buttons for updating quantity, which leads to errors such as a shopper typing 2 beside the default 1 and getting 21. Accounts should be optional and easy to enter. In testing, strict password rules caused up to 19% checkout abandonment among existing account holders.
Trust comes from plain pages that are easy to find: delivery, returns, payment, contact and the seller’s identity. In Baymard’s survey, 13% of shoppers left over an unsatisfactory returns policy. What a shop must disclose is set by consumer law, which differs by country, so check those pages with a lawyer in each market. The confirmation page and emails then repeat the order number, items, total, address and expected date, with links to tracking and returns.
Mobile layout, Core Web Vitals and accessibility law for stores
Design for the phone first. Baymard notes that mobile often makes up 50% of traffic on many ecommerce sites, and its 2026 benchmark rates 75% of mobile sites as only mediocre. Google’s web.dev guidance sets good Core Web Vitals at a Largest Contentful Paint within 2.5 seconds, an Interaction to Next Paint of 200 milliseconds or less and a Cumulative Layout Shift of 0.1 or less. They are measured at the 75th percentile of page loads, separately for mobile and desktop.
The W3C published WCAG 2.2 as a Recommendation on 5 October 2023, and several new criteria fit shops directly. Target Size (Minimum) asks for pointer targets of at least 24 by 24 CSS pixels, with exceptions. Redundant Entry says data already entered in the same process must be filled in or offered for selection, as with a billing address. Accessible Authentication rules out sign-in that depends on a cognitive function test, such as remembering a password, unless an alternative or helping mechanism exists.
In the EU, the European Commission lists e-commerce among the services the European Accessibility Act covers. Ireland’s Competition and Consumer Protection Commission, the compliance authority for e-commerce there, states that the Act came into effect on 28 June 2025. The Wikipedia summary describes an exemption for microenterprises providing services: fewer than 10 persons and turnover or balance sheet of no more than €2 million. Rules in the UK, the US or the Gulf differ, so check your case with a specialist for each market.
Theme or custom store design, and what to prepare for the brief
A ready-made theme suits a small catalogue of standard products and a tight budget, because the cart and checkout already work. A custom design pays off when the catalogue needs its own filters, sizing help or configuration, or when the brand must stand apart. Either way, test the mock-ups against the numbers above. Prepare the catalogue with variants and filter attributes, several photos per product including one in scale, and the policies, with delivery written per destination.
VITON13 Studio designs this as a fixed-scope ecommerce experience project covering catalogue journeys, a product page system and checkout flows. The service page lists it from $113 with AI assistance or from $173 human-led, in 6–10 working days with 2 revision rounds. The scope is confirmed in writing before work begins. With the catalogue, photos and policies ready, good ecommerce website design starts from real pages instead of open questions.
Practical checklist
- List every product with its variants and the attributes that will become filters and sorting options.
- Shoot at least three photos per product, including one in scale and one in use where it helps.
- Write delivery options, cost and timing per destination, and link the returns policy from every product page.
- Count the checkout form elements, make guest checkout the first option and rewrite each error message.
- Test the main templates on a phone against LCP 2.5 s, INP 200 ms, CLS 0.1 and the WCAG 2.2 target size.
Questions and answers
How many page templates does an online store design need?
Count templates, not pages. A typical store needs a homepage, a category list, search results, a product page, the cart, the checkout steps, the account area, an order confirmation and the policy pages, plus the order emails. Each template then serves hundreds of products.
Should a new online store use a theme or a custom design?
A theme is the sensible start for a small range of ordinary products when money is short, since its cart and checkout are proven. Custom work earns its cost when products need special filters, sizing help or configuration, or when the brand has to look different on a crowded platform.
How many fields should an ecommerce checkout have?
Baymard’s testing found that a checkout can work with 12–14 form elements, 7–8 of them actual fields, against an average of 23.48 elements in US checkouts. Cut whatever the order does not need, and explain any personal question, such as a phone number.
Does the European Accessibility Act cover my online shop?
The European Commission lists e-commerce among the covered services, and the Act has applied since 28 June 2025 according to Ireland’s regulator. Microenterprises providing services are described as exempt. National laws differ, so check your own case with a specialist for each EU market.
Which page speed targets should an ecommerce store aim for?
Google’s web.dev pages call a page good when Largest Contentful Paint is 2.5 seconds or less, Interaction to Next Paint 200 milliseconds or less and Cumulative Layout Shift 0.1 or less, at the 75th percentile of visits on mobile and desktop.