Ecommerce website design works when shoppers can find a product, understand it, trust the store and pay without friction.
Good ecommerce UX comes down to clear navigation, product pages that answer buying questions, visible costs and a short checkout.
Treat each of these as a hypothesis to test, though: in our database, changes that follow common best practice win on one store and lose on the next.
This guide walks through ecommerce UX best practices page by page, from the menu to the payment button.
Each point is backed by real A/B tests from the LiftArchive test database, including the ones that failed.
It ends with how to find usability problems on your own site before you redesign anything.
What ecommerce UX is, and why it decides sales
Ecommerce UX is the whole experience of shopping on a store: how fast pages load, how easy products are to find, how clearly they are described, and how much effort it takes to pay.
Visual design is part of it, but most UX problems that cost money are about missing information or extra effort, not color or style.
The scale of the problem is well documented.
Baymard Institute averages 50 studies to a 70.22% documented cart abandonment rate.
In Baymard's survey of shoppers who abandoned during checkout (excluding people who were just browsing), the top reasons were extra costs being too high (40%), slow delivery (20%), not trusting the site with card details (19%), being forced to create an account (18%) and a checkout that was too long or complicated (17%).
Almost every one of those reasons is a UX decision.
Costs that appear late, delivery dates that are vague, a missing guest option and a long form are all things a store chooses to show or hide.
UX versus CRO
UX describes the experience; conversion rate optimization is the process of measuring and improving it.
A UX audit tells you where shoppers struggle.
An A/B test tells you whether your fix actually earns more money.
You need both, because a fix that looks obviously better can still lose.
That is the main point of this guide.
Most "ecommerce UX best practices" lists are written from usability research, which is a good source of ideas.
Our database adds the second half: what happened when stores shipped those ideas to real traffic and measured revenue.
What our tests show about best practices
Tests in the database cluster around a handful of areas.
Product pages, collection pages, navigation, the cart and checkout account for most ecommerce results, and the same patterns repeat: reduce effort to buy, answer the obvious question near the buy button, and show costs and delivery early.
But the losers are the useful part. Clean Commit added a filter panel to an anonymized Shopify store's collection pages and saw -6.4% conversion rate and -33.2% revenue per visitor, even though add-to-cart rose 4.8%.
Dave Diederen tested skipping the cart and sending shoppers straight to checkout and lost 6.58% revenue per visitor. Both changes appear on many UX checklists.
Ecommerce UX best practices, page by page
The practices below are grouped by the step of the journey where they matter.
For each one we give the reasoning, the tests that support it and the tests that warn against applying it blindly.
1. Homepage: point people to products fast
Most homepage visitors are trying to get somewhere else on the site.
The homepage tests that win in our database get shoppers into a category or product sooner, rather than adding brand storytelling above the fold.
- Dave Diederen moved the most-clicked category to the first homepage tab and removed the Best Sellers tab for +14.40% revenue per visitor.
- Oliver Kenyon added Instagram-style category bubbles above the mobile homepage hero for +10.9% revenue per visitor. On another store, Dave Diederen found that hiding a similar category slider cost 2.95% revenue per visitor.
- Dave Diederen replaced a homepage hero video with a static image and a benefit callout for +52.67% revenue per visitor. A heavy video is slower to load and says less than one clear sentence.
Use your analytics to find which categories homepage visitors click most, then make those the first and largest options.
That ordering decision, which takes minutes, keeps showing up in winning tests.
2. Navigation: let shoppers reach the right category in one or two taps
Navigation is where shoppers decide whether the store has what they want.
The best-performing menus in our database put the categories that earn the most money first, show what is inside each category, and keep search close at hand.
- Oliver Kenyon tested a mega menu with category descriptions and a testimonial that added +$151,192 per month.
- Oliver Kenyon also added a search bar inside the mega menu for +$81,050 per month, and a mobile menu reordered by revenue per session with a Best Sellers slider for +$48,607 per month.
- A full-screen mobile mega menu with larger tap targets, also by Oliver Kenyon, added +$50,568 per month.
Larger tap targets have an accessibility basis too.
WCAG 2.2 success criterion 2.5.8 asks for pointer targets of at least 24 by 24 CSS pixels, with some exceptions, and notes that bigger targets help many people.
Not every menu idea works. Blend Commerce added product images to a memorial store's mobile menu and saw -2% conversion rate overall; the positive result only appeared after excluding one landing page.
Clean Commit added breadcrumbs to collection pages and got an inconclusive +1.8%.
More links and pictures are not automatically better.
See navigation menu tests for the full set.
3. Search and filters: help people narrow down, but watch the cost
Shoppers who search usually know what they want, so search should be easy to find on mobile and should return useful results early.
Oliver Kenyon's mobile menu with search at the top and Clearance listed first added +$92,000 per month.
Filters are where the evidence is most mixed.
Oliver Kenyon added filter tags like Best Sellers and New Drops to a collection page for +$82,542 per month, and a floating filter bar for +$68,584 per month.
Yet the Clean Commit filter panel mentioned above lost a third of revenue per visitor, apparently through lower mobile order values.
The pattern: quick, merchandised shortcuts (tags, tabs, category bubbles) tend to win on stores with small catalogs, while full attribute filters suit large catalogs where shoppers genuinely need to narrow down.
Blend Commerce's instant search suggestions test was not significant (+1.92% revenue per visitor).
More detail is in our site search guide.
4. Collection pages: make product cards do more of the selling
On collection pages, the product card is the whole interface.
Cards that show more of the product and let shoppers act without opening the product page performed well across many tests.
- Oliver Kenyon added Quick Add buttons to collection page product cards for +$135,307 per month.
- Dave Diederen let shoppers swipe through product image galleries on the collection page for +11.60% revenue per visitor.
- Dave Diederen also replaced pagination with infinite scroll for +3.01% revenue per visitor.
Quick-add has limits. Clean Commit tested one-click size buttons on collection cards and saw a 0% change in conversion.
Products that need a size or variant choice may still need the product page.
Our product listing page guide covers card layout in more depth.
5. Product pages: answer the buying questions near the button
The product page carries the most tests in our database, because it is where shoppers decide.
The tests that win usually add or move information that answers a question at the moment of purchase: what it looks like, which size, when it arrives, what if it doesn't work.
Images. Dave Diederen replaced mobile gallery dots with a scrollable thumbnail strip for +15.10% revenue per visitor, and a new first product image added +10.44%.
Elevate A/B Testing moved the second product photo into first position, lifting revenue per visitor from £3.32 to £3.60.
Variant selectors. Dave Diederen replaced variant dropdowns with visual selector blocks for +3.79% revenue per visitor, and Oliver Kenyon separated men's and women's sizes for +12.9%.
But Blend Commerce found frequency pills instead of a dropdown cost 7% conversion on a coffee subscription, so visible buttons are not a universal rule.
Delivery and costs. Since extra costs and slow delivery top Baymard's abandonment list, showing them early is one of the most reliable UX moves we see.
Dave Diederen added a shipping info bar below the add-to-cart button with a 'Ships by' date for +13.48% revenue per visitor, and removed 'Shipping calculated at checkout' from a page that promised free shipping for +14.07%.
Sticky add-to-cart. Blend Commerce saw +25.95% conversion rate from a desktop sticky add-to-cart bar for Pertronix, while the same store's mobile version was not statistically significant.
Clean Commit's mobile sticky button raised add-to-cart 6.8% but showed -7.7% conversion, also inconclusive.
More in sticky add-to-cart tests and the product page design guide.
@oliverkenyon
@DaveDiederen@DaveDiederen@DaveDiederen
Clean CommitClean Commit6. Cart: reassure and shorten the path to pay
The cart (or cart drawer) is a last check before paying.
Tests that add reassurance and faster payment options here often win.
- Oliver Kenyon added a dispatch, returns and payment block under the checkout button in a cart drawer for +23.8% revenue per visitor.
- Blend Commerce added express checkout to the cart drawer for +35.44% conversion rate, and a Shop Pay button in the cart drawer for +47.75%.
Stripping the cart down to just the checkout button is a riskier move.
Clean Commit redesigned a minicart around the checkout button and removed recommendations and chat: -9.9% conversion and -18.2% revenue per visitor, though over only 7 days.
Where express buttons go also matters. Blend Commerce saw +13% conversion from removing express checkout from product pages on one store, and -14% mobile conversion from adding it to product pages on another.
In both, the cart was the better place for it. See our cart abandonment guide.
7. Checkout: fewer surprises, clearer fields
Checkout UX is mostly about removing doubt and effort.
Baymard estimates that the average large ecommerce site can gain a 35.26% increase in conversion rate through better checkout design.
That is Baymard's estimate from its own benchmarking, not a measured average from split tests.
In our database, small checkout fixes show measurable effects:
- Surefoot explained the contact fields in BioLite's Shopify checkout, grouping email and phone with helper text, for +18% transactions.
- DRIP Agency removed optional checkout fields for +0.9% revenue per user, a small but real gain.
- Dave Diederen added three USPs below the Pay Now button for +10.07% revenue per visitor.
Conversionista reported +73% checkout conversion from 18 usability fixes at Devold, but that was a before/after comparison against the same month a year earlier, not a split test.
Use results like that as direction, not as a forecast.
Our guides to checkout flow and guest checkout go further.
8. Speed and mobile: the base everything else sits on
Slow pages and layout shifts make every other UX element worse.
Google's Core Web Vitals give concrete targets: Largest Contentful Paint within 2.5 seconds, Interaction to Next Paint of 200 milliseconds or less, and Cumulative Layout Shift of 0.1 or less, measured at the 75th percentile of page loads.
Speed evidence in our database is mostly before/after, so treat it with care.
Vasta reported +20% conversion rate after raising mobile PageSpeed from 35 to 92 for a supplement brand, without a control group.
A cleaner signal comes from Oliver Kenyon, who A/B tested a landing page rebuilt natively in Shopify against the same page in a page builder: +20.9% revenue per visitor.
More in our page speed guide and mobile CRO guide.
Ecommerce usability: how to find problems and prove the fixes
Best-practice lists give you ideas. Usability research tells you which ideas matter on your store.
Testing tells you whether the fix pays. Skipping the middle step is why so many redesigns based on checklists come out flat.
Start with a heuristic review
A heuristic evaluation means walking through the site against a set of known usability principles.
The most widely used set is Jakob Nielsen's 10 usability heuristics, first developed with Rolf Molich in 1990 and refined by Nielsen in 1994. Several translate directly to ecommerce:
| Heuristic | What it looks like in a store | Related test |
|---|---|---|
| Visibility of system status | Show delivery dates, stock and the cart total as shoppers go | Shipping deadline bar on the PDP (Dave Diederen, +10.95% RPV) |
| Recognition rather than recall | Visual swatches and thumbnails instead of hidden menus and dots | Visual variant blocks (Dave Diederen, +3.79% RPV) |
| Error prevention | Explain why fields are needed; avoid pre-ticked add-ons | Hid pre-ticked shipping protection (Dave Diederen, +3.74% RPV) |
| Aesthetic and minimalist design | Remove clutter, but not information shoppers use | Checkout-first minicart (Clean Commit, -9.9% conversion) |
| Help and documentation | FAQs and policies near the point of decision | Trust-focused homepage FAQ (Dave Diederen, +1.15% RPV) |
The minimalism row is the trap. "Remove clutter" is a sound principle, but the Clean Commit minicart test removed things shoppers were using.
A heuristic tells you where to look; it doesn't tell you what to remove.
Our guide to heuristic evaluation has a full checklist.
Watch real shoppers
Usability testing (asking five to eight target customers to complete a task, such as finding and buying a gift under a set budget) surfaces problems you will never see from your own desk.
Pair it with session recordings, on-site surveys and support tickets.
The usability testing guide explains how to run a cheap round.
Research is where the best test ideas in our database come from.
Oliver Kenyon added three survey-based reassurance lines above a collection page grid, worth $44,890 per month, using wording taken from customer surveys rather than a checklist.
Then test, and read the result honestly
Once you have a list of usability problems, rank them by how many shoppers they touch and how close they sit to the purchase.
A shipping-cost surprise in the cart outranks a footer redesign.
Then A/B test the fixes one area at a time, using revenue per visitor as the main metric, not add-to-cart.
| Problem type | Where to look | Typical fix to test first |
|---|---|---|
| Surprise costs | Product page, cart, first checkout step | Show shipping price or free-shipping status and a delivery date near the button |
| Can't find the product | Menu, search, homepage | Reorder categories by revenue; put search at the top of the mobile menu |
| Unsure about the product | Gallery, variant selector, reviews | Thumbnails, a better first image, clearer size options |
| Unsure about the store | Cart and checkout | Returns, dispatch and payment reassurance under the checkout button |
| Too much effort to pay | Cart and checkout | Express payment in the cart, fewer and better-explained fields |
Two of the tests above show why the metric matters.
Clean Commit's filter test and mobile sticky add-to-cart test both raised add-to-cart while conversion or revenue went down.
A UX change that adds clicks without adding orders is not a win.
Also watch for small samples and before/after comparisons.
A large lift from a 7-day test, or from comparing this month with last year, needs a proper split test before you rely on it.
Browse the full test database to see how similar changes did on other stores before you commit to a redesign.