E-commerce Website Design: Store Layouts That Sell and Rank, from Menu to Checkout

Shoppers enter through the side door, so every page is a storefront

A home page gets the attention in design meetings. It rarely gets the traffic. Searches for a type of product land on category pages, searches for a model land on product pages, and ads and emails drop people wherever the offer lives. So every template has to tell a stranger where they are, answer the question they arrived with, and point to the next step. Google's own advice runs the same way: it uses the mobile version of a site's content for indexing and ranking, per its mobile-first indexing documentation. The phone layout is the store, as far as search is concerned.

The rest of this guide takes those templates one at a time. For the search side of the same store (keywords, facets, feeds), the e-commerce SEO guide is the companion piece.

Menus labeled in the customer's words, linked in plain HTML

Google's guide to e-commerce site structure tells stores to add links from menus to category pages, then from categories to subcategories and products, and notes that the more links a page has pointing to it within a site, the higher its relative importance. A menu is therefore both a sign on the aisle and a vote on which pages matter.

• Name categories the way shoppers search. "Women's running shoes" beats "Performance Collection." Your e-commerce keyword research supplies the words; the menu should use them.
• Build links as real links. Google asks for `<a href>` tags and warns against JavaScript events on other elements for navigation. A menu that only works on tap may look fine and still hide half the catalog from crawlers.
• Keep the tree shallow. Three levels (department, category, subcategory) suit most catalogs. Deeper trees bury products and tire thumbs.
• Give best sellers a shortcut. Google suggests linking important products from the home page. A short "most ordered" row does it honestly.
• Add breadcrumbs. They tell a visitor who arrived from search where they stand and offer a one-tap route up to the category.

Category pages are the shelf, and the shelf does the ranking

Category pages win the broad searches, so they deserve more design time than they usually get. A good one shows how many products match, lets shoppers filter by the attributes they actually choose on (size, fit, material, price, compatibility), keeps the filters visible on a phone, and opens with two or three sentences that help a buyer choose, not a paragraph of keywords written for a robot that stopped reading them years ago.

Long categories need pages, and pagination has rules. Google's pagination guidance asks stores to give each page a unique URL, link each page to the next with `<a href>` tags, give each page its own canonical URL rather than pointing everything at page one, and avoid fragment identifiers such as #page2, which Google ignores. It also says Google no longer uses rel=next and rel=prev.

Infinite scroll is the classic trap. Google says its crawlers do not click buttons, so products that appear only after a script runs can go unfound. Keep a crawlable paged version underneath. The canonical tags guide covers filter URLs in more depth.

Product pages that answer what a clerk would be asked

A product page has one job: replace the person at the counter. Every unanswered question becomes a tab opened to a competitor or a return label printed later.

Writing the copy and handling duplicate descriptions is its own craft, covered in the product pages guide. The markup itself is explained in the schema markup guide.

Site search hears the most expensive questions in the store

People who type into a store's search box usually know what they want. They are also the easiest customers to lose, because a blank results page reads as "we do not carry it" even when the store does. Baymard Institute, which benchmarks large retail sites, reported in its 2026 search UX benchmark that 56% of sites have "mediocre or worse" search usability. If the giants with search teams land there, a small store on default settings should test its own box before assuming it works.

• Forgive spelling. Try your three best sellers misspelled. If the results come back empty, so do the carts.
• Map synonyms. Couch and sofa, sneakers and trainers, tee and t-shirt. Your customers' words, not your supplier's catalog codes.
• Search by use and attribute. "Waterproof boots for kids" should return waterproof boots for kids, not every boot in the warehouse.
• Design the no-results page. Offer spelling suggestions, popular categories and a way to ask. It is a page, not an apology.
• Read the search log monthly. Queries with no results are a free list of products to stock, pages to write and synonyms to add.

Checkout: where seven of ten carts are abandoned

Baymard's cart abandonment research, last updated September 2025, puts the documented average at 70.22%, calculated from 50 studies. Some of that is window shopping: in Baymard's own survey, 42% of US online shoppers had abandoned a cart because they were just browsing. Among the rest, the reasons are mostly design and policy decisions a store controls.

Baymard also counts form clutter. The average US checkout shows 23.48 form elements by default (14.88 counting only fields), while its research suggests an ideal flow needs 12 to 14 elements, or 7 to 8 fields. It estimates that the average large store could raise its conversion rate by 35.26% by fixing solvable checkout issues. Treat that as an estimate from a firm that sells checkout research, and test your own flow. If yours runs on WooCommerce and simply fails, the WooCommerce checkout fix comes first.

Nobody abandons a cart because the checkout was too short.

Speed, tap targets and contrast: design choices that show up in the data

Google's Core Web Vitals set three thresholds for a good experience: the largest content element loads within 2.5 seconds, pages respond to input within 200 milliseconds, and layout shift stays at 0.1 or less, measured at the 75th percentile of page loads, segmented across mobile and desktop. On a store, most failures are design decisions that someone signed off on.

• Hero carousels. Five rotating banners mean five large images and a script, for messages few visitors see past slide one.
• Images without set dimensions. The page jumps as each photo arrives, and the shopper taps the wrong thing. Reserve the space in the layout.
• App and tag pileup. Every review widget, chat bubble, upsell app and pixel runs on every page. Remove what nobody can tie to sales.
• Popups on arrival. A discount modal that covers a product page on a phone gets in the way of the purchase it is trying to start. Delay it, or put the offer in a banner.
• Tiny targets and pale text. WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels at Level AA and a contrast ratio of at least 4.5:1 for normal text.

Our guide to improving Core Web Vitals walks through the fixes, and site speed work is available when the theme itself is the problem.

Layouts by type of store, with the pattern each one needs

A store selling one blender and a store selling forty thousand fasteners solve different problems. These patterns tend to fit each type.

Each corner of retail adds its own features and rules, which our e-commerce website design service page covers by category. If the store lives on Shopify, the Shopify store design page explains when a theme is enough.

Optimizing the store you have before paying for a new one

E-commerce website optimization usually starts with evidence, not a redesign. Most stores can find their worst leak in an afternoon, in this order:

1. 1

   Buy something on your own phone

   Use cellular data, a guest checkout and a real card. Time it, count the fields and note every moment you hesitated.

2. 2

   Read the funnel in analytics

   In GA4, compare product views, add-to-carts, checkouts started and purchases by device. The steepest drop is where to look first. If the numbers look wrong, fix tracking before redesigning anything.

3. 3

   Check Search Console's page reports

   Look for category and product pages that are excluded from the index, and for Core Web Vitals groups failing on mobile.

4. 4

   Open the search log

   List the queries that returned nothing and fix the top ten with synonyms, redirects or new products.

5. 5

   Change one thing at a time

   Move shipping costs up, cut a field, remove a slow app. Measure for a few weeks, then make the next change.

Before any of that, the free website audit checks speed, SEO, mobile and security and emails the fixes. For the store's search setup once the design is right, continue with the e-commerce SEO audit, and for traffic beyond Google, the e-commerce marketing guide.