Ecommerce UX Design: Best Practices That Drive Conversions in 2026

Key Takeaways

• Shoppers abandon 70.22% of online carts on average, and extra costs (40%), slow delivery (20%), and forced account creation (18%) are among the top reasons (Baymard Institute, 2025).

• Only 48% of leading desktop ecommerce sites and 38% of mobile sites have "decent" or better product page UX (Baymard Institute, 2026).

• Faster pages sold more in Google-published A/B tests: Rakuten 24's conversion rate rose 33.13% (web.dev) and Vodafone's sales rose 8% (web.dev).

• All 14 practices end with a check you can run on your own store and say whether the fix is a platform setting or a custom build.

When an online store stops converting, the usual response is an ecommerce UX redesign. Yet Baymard Institute's research lists extra costs, slow delivery, and forced account creation among the top reasons shoppers abandon a checkout, and no new layout fixes those.

Most advice on ecommerce UX design reads like a layout checklist. The parts of the ecommerce user experience that move revenue are build decisions. They include how your site search handles a typo, which payment methods and carriers your checkout offers, how fast product pages load, and whether your team can change a promotion without a developer.

This guide covers 14 ecommerce UX best practices, from site search to the updates buyers get after they pay. Each one ends with a check you can run this week and tells you whether the fix is a platform setting or a custom build.

The examples come from projects DBB Software's engineers have built: the Bookis book marketplace in Norway and Sweden, booking features at Omio, and storefront components for Crocs, Coach and Solo Stove. Our engineers built those storefront components while embedded in a retail-focused agency.

Which Ecommerce UX Problems Should You Fix First?

Fix three things first: the full price at checkout, your delivery options and the ways people can pay. Together they cover the four reasons shoppers give most often for abandoning a checkout in Baymard Institute's research.

1. Show shipping, taxes and the total before checkout (practice 5). In Baymard's survey, 40% of shoppers who abandoned a checkout blamed extra costs such as shipping, tax and fees. Another 12% couldn't see or calculate the total up front.

2. Offer shipping options and delivery dates buyers trust (practice 8). 20% of those shoppers left because delivery was too slow (Baymard).

3. Offer guest checkout and the payment methods buyers already use (practice 6). 19% didn't trust the site with their card details, 18% left because the site required an account, and 9% didn't find enough payment methods (Baymard). Wallets such as Apple Pay or Vipps also build trust, because shoppers don't type their card details into your site.

If your checkout already passes all three, look at page speed next (practice 12). In a Google-published A/B test, the faster version of Rakuten 24's site had a 33.13% higher conversion rate.

Baymard's figures are what shoppers say when asked, so treat them as a ranking of complaints to fix first rather than as measured causes.

What Is Ecommerce UX?

Ecommerce UX (user experience) is how easily a shopper can find a product in your store, decide to buy it, pay for it and get it delivered. Ecommerce UX design shapes what shoppers see at each step, but most of what they feel as good or bad UX comes from how the store is built.

Take a search that returns nothing for a misspelled product name, a checkout without the wallet your buyers use, or a delivery date that appears only after payment. Shoppers experience each one as bad UX, and each fix, like search configuration, payment integrations, or carrier data, can be applied in the build.

This guide follows the whole ecommerce user experience in the order shoppers meet it:

• Finding a product

• Deciding

• Paying

• Receiving the order.

Two layers sit underneath every stage:

• The tools your team uses to run the storefront

• The technical foundations of speed, mobile, and accessibility.

Where you run your store changes what each fix involves. On a SaaS platform like Shopify, many of these fixes are settings or apps you can switch on yourself, with no help from a developer. On a custom build, the same fixes are engineering work, so each practice below says which kind of fix it is.

Ecommerce Search and Navigation Best Practices

Three practices cover ecommerce search and navigation: site search that handles typos and synonyms, AI search for plain-language requests, and filters built around how people shop.

1. Make Site Search Handle Typos, Synonyms and Zero Results

Your site search should return useful results when a shopper misspells a product, uses a different word for it, or searches for something you don't stock. Constructor, a site-search vendor, analyzed 609 million searches on 113 ecommerce sites in late 2024. Searchers made up 24% of online shoppers but drove 44% of ecommerce revenue.

Good site search handles these four cases:

• Typos: a search for "sneekers" should still find sneakers, so turn typo tolerance on and test it on your best sellers.

• Synonyms: shoppers use their own words, so map them to your catalog's words, such as "couch" to "sofa".

• Zero results: a "no results" page should offer the closest matches or popular categories.

• Search logs: review the searches that returned nothing each month, because they show what shoppers want and what they call it.

A useful zero-results page depends on product data good enough to suggest alternatives.

On Bookis, DBB Software added a catalog of more than 2 million books and built the website's product and address search. With a catalog that size, browsing alone can't get a buyer to one specific edition, so search has to carry most of the finding.

Platform or build: On a platform, you'll use the built-in search or a search app, where you can tune typo tolerance and synonyms. On a custom build, the search engine and its relevance rules are engineering work.

How to check it: Search for your top 20 products once with a typo and once with a synonym, then count how many searches return nothing. There's no official threshold, but every zero-result search for a product you stock is a sale you could lose.

2. Let Shoppers Search in Plain Language With AI Search

AI search lets a shopper describe what they want in one sentence, with details like budget, size or dates, and turns it into the filters and results they'd otherwise set by hand. It can't fix bad product data, so it only pays off once the basics from practice 1 are in place.

With AI search, visitors face the usual risk of hallucination. AI may confidently suggest a bad result, such as a filter the shopper never asked for, or a match that doesn't fit. Good AI search turns the sentence into filters your system checks, explains why each result matches, and falls back to classic search when it can't read a request.

Case in focus: AI hotel search on a travel booking platform

DBB Software built the AI search for a travel booking platform whose owner is under NDA. Travelers describe a trip in one sentence, for example, "hotels in Miami for next month with a beach view, two adults and two children, 8,000 budget."

The pipeline reads the intent and breaks the request into filters and tags. It then matches them against the hotel inventory with vector search, which compares meaning rather than exact words. Each result comes with an explanation of why it matches.

Before any change to the pipeline ships, it's scored against evaluation sets built from real user prompts, and versioned workflows run side by side for A/B comparison. One agency has replaced its own website with the platform, and the AI search runs there in production.

Algolia reports that with its AI-powered search, Everlane's "no results" rate dropped 45% and its conversion rate rose 5%. Zenni Optical's conversion rose 9% and its search revenue 34%.

Platform or build: On a platform, AI search for ecommerce usually comes as an app from a search vendor, which you configure. On a custom build, the intent parsing, filter rules, vector search and evaluation sets are engineering work. Adding AI search to a store you already run is an integration project.

How to check it: Type three real customer sentences into your search, each with a budget, a size or a use. There's no official threshold, so check whether the results reflect every detail in the sentence or ignore half of it.

3. Build Filters and Categories Around How People Shop

Filters and categories should follow the attributes shoppers actually choose by, such as size, price, color, or compatibility, and let them combine several at once. This is called faceted search: filters built from product attributes that shoppers can stack to narrow a product listing page.

In Baymard Institute's 2025 benchmark of leading stores, 58% of desktop sites and 67% of mobile sites had "mediocre" to "poor" homepage and category navigation. The same benchmark found that 95% don't highlight where shoppers are in the main navigation.

Good filters and categories do four things:

• Match how people choose: build filters from the attributes shoppers compare, even when your warehouse labels products differently.

• Combine and persist: let shoppers stack several filters and keep them applied on the next results page.

• Show counts: display how many products each filter option returns, so nobody clicks into an empty list.

• Show where they are: highlight the current category and show breadcrumbs, the trail of category links above the results.

If sizes are stored three different ways across your suppliers, no filter design can fix that, so cleaning and structuring attributes is part of the build.

Platform or build: On a platform, your filters depend on product data (tags, attributes, metafields) and on what your theme supports. On a custom build, faceted search is built on your catalog's data model.

How to check it: Open a category with at least 1,000 products and try to narrow it to 20 in three clicks. Then move to page two and check that your filters are still applied. There's no official threshold.

Ecommerce Product Page Best Practices

A good ecommerce product page answers what a buyer would otherwise ask your support team: what the product is, whether it fits, what it costs to receive, and what other buyers think.

4. Answer the Buyer's Top Questions on the Product Page

Put the answers to your buyers' most common questions on the product page itself, next to the price and the add-to-cart button, where the question comes up. Baymard Institute's 2026 benchmark, built on more than 30,000 manually rated scores, found that only 48% of leading desktop ecommerce sites have "decent" or better product page UX. On mobile it's 38%, and in apps 36%.

Shoppers actively seek out critical reviews, according to Baymard's research. Yet 89% of sites don't respond to negative ones, leaving the complaint as the last word on the page.

A product page that answers the buyer covers:

• Fit and compatibility: sizes, dimensions or compatible models, in the units shoppers compare.

• Cost to receive it: the shipping cost and delivery date, shown before the cart (practice 5).

• Reviews, including critical ones: with a reply from your team wherever a review raises a problem.

• Related products: alternatives and accessories that AI product recommendations can choose from, using browsing and purchase data once your catalog is large.

Agentic commerce means AI shopping agents that compare and buy products on a shopper's behalf. The structured product data behind a good product page (price, availability, reviews) is also what those agents read.

Platform or build: On a platform, this is theme sections plus complete product data. On a custom build, it's templates fed from your product data source.

How to check it: List the three questions your support team hears most about a best-selling product and check whether its page answers them. Then read its critical reviews and see whether any have a reply; there's no official threshold for either.

Ecommerce Checkout Best Practices That Reduce Cart Abandonment

A good ecommerce checkout UX shows the full price before payment, lets people pay as guests with the methods they already use, and keeps one checkout even when the cart is complicated. That matters because Baymard Institute puts the average documented cart abandonment rate at 70.22%, based on 50 studies.

5. Show Shipping, Taxes and the Total Before Checkout

Show shoppers what the order will really cost, including shipping, taxes and any fees, before they reach the payment step. In Baymard's survey, 40% of shoppers who abandoned a checkout blamed extra costs, and 12% couldn't see or calculate the total up front.

The full price a shopper needs before checkout includes:

• Shipping: the actual rate for their address, or at least the free-shipping threshold.

• Taxes and duties: calculated for their location, especially on cross-border orders.

• Fees: payment, service or small-order fees, shown wherever they apply.

• The delivery date: an estimate, so the price comes with a date attached.

Showing real costs early is a build decision. The cart needs live carrier rates and tax calculation for the shopper's address, and those only work if the systems are connected before checkout.

The same rule applies to subscriptions. For Tie, a platform that helps creators and ecommerce brands sell to their audiences, DBB built a billing view with a line-item breakdown of the current bill, forward predictions of upcoming charges, and a calculator for comparing plans. Choo Choo, a UK rail-ticketing startup whose mobile-first platform DBB built, set out to beat "competitors' complex UX and hidden fees."

Platform or build: On a platform, shipping-rate and tax settings or apps can show costs in the cart. On a custom build, you connect real-time carrier rates and a tax engine to the cart.

How to check it: Add a product to the cart as a new visitor and note where the shipping cost and delivery date first appear. If they only appear after you've entered card details, the check fails.

6. Offer Guest Checkout, Express Checkout and Local Payment Methods

Let people buy without creating an account, and offer the payment methods they already use, including express checkout. Express checkout means paying with a stored wallet such as Apple Pay, Google Pay or Shop Pay, so the shopper doesn't retype card and address details.

In Baymard's survey, 18% of shoppers who abandoned checkout left because the site required an account, and 9% because there weren't enough payment methods. Another 19% didn't trust the site with their card details, and wallets help there too, because shoppers don't type card details into your site.

Shopify reports that its own Shop Pay wallet lifts conversions by up to 50% compared with guest checkout, citing a 2023 study with a management consulting firm.

In some markets, buyers expect a local method. On Bookis, Stripe and Vipps handle "the full payment lifecycle, from checkout to payback processing" (case study). Vipps belongs to Vipps MobilePay, which reports more than 12 million users across Norway, Denmark, Finland and Sweden. DBB also built Apple Pay and Google Pay ticket payments for Choo Choo, integrated a payment system into Solo Stove's checkout, and embedded it with Solara6.

Platform or build: On a platform, guest checkout and wallets are usually settings, provided your payment provider supports the local method you need. On a custom build, you integrate the providers yourself, as DBB did with Stripe and Vipps for Bookis.

How to check: Find the payment method your buyers use most in each market and confirm it appears on the first checkout screen. Then try to buy without creating an account. Both are yes/no checks with no official threshold.

7. Keep One Checkout for Multi-Seller and Mixed Carts

Give shoppers one predictable checkout, even when their cart mixes items from different sellers or with different delivery rules, and let your platform split payment and delivery behind it. A mixed cart (also called a multi-seller or multi-vendor cart) is any cart whose items follow different rules for who sells, ships or refunds them.

Your order system must support that split. Each seller type may need its own payment and delivery rules. A checkout page can only show what the system supports, so you decide this when you build the platform.

Inside the single checkout, group items by seller and show each seller's shipping cost and delivery date before payment. Shoppers see the full price (practice 5) without paying separately for every seller.

Case example: Bookis

Bookis is a book marketplace in Norway and Sweden where people buy from bookstores (B2C) and from each other (C2C). Nordic retail-tech outlet Springboard describes it as a marketplace built "with a strong focus on user experience for both buyers and sellers" (our translation from Norwegian).

DBB Software built the Bookis website to support both models "with dedicated flows for each model." Stripe and Vipps, the Norwegian mobile payment app, handle "the full payment lifecycle, from checkout to payback processing." The marketplace has passed 450,000 active users and $4M in gross merchandise value (case study).

In travel booking, the same pattern appears at Omio, which helps millions of travelers book trains, buses and flights. DBB's engineers work on its booking features, including Journey Flow, which lets users "combine several tickets as a single purchase."

Platform or build: Storefront platforms like Shopify are built around one merchant per store, so a multi-seller cart usually comes from a marketplace app. You get the checkout flows that app supports. When each seller type needs its own payment and delivery rules, as bookstores and private sellers do on Bookis, you're looking at custom marketplace development.

How to check it: Put items from two sellers, or two items with different delivery options, into one cart and go through checkout. Count the extra steps, repeated forms, and separate payments you hit on the way. There's no official threshold, so aim for none you could remove.

Post-Purchase Experience: Delivery and Order Updates

The post-purchase experience starts before payment, with delivery options shoppers trust, and continues with updates that answer "where is my order?" before they have to ask. It belongs in ecommerce UX because slow delivery is one of the top reasons shoppers abandon a checkout in the first place.

8. Offer Shipping Options and Delivery Dates Buyers Trust

Offer the carriers and delivery options your buyers already know, and show an expected delivery date before they pay. In Baymard's survey, 20% of shoppers who abandoned a checkout left because delivery was too slow, and 13% because the returns policy wasn't satisfactory.

Delivery options buyers trust usually include:

• Carriers they know: the local postal and parcel services your buyers already use.

• A delivery date: an estimated date shown at checkout that shoppers can plan around.

• Pickup options: pickup points or lockers, wherever buyers in your market use them.

• The returns policy: a one-line summary before payment, linked to the full terms.

On Bookis, DBB Software connected the local postal services PostNord and Helthjem "for physical book delivery across Norway and Sweden, making C2C local delivery one of the platform's most distinctive features" (case study).

Platform or build: On a platform, carrier apps and shipping settings cover this, limited to the carriers the platform supports in your market. On a custom build, you integrate the carriers' APIs directly, as DBB did with PostNord and Helthjem for Bookis.

How to check it: Go through checkout with an address in each of your main markets. Check that the carriers and pickup options buyers use locally appear before payment, each with a delivery date.

9. Send Order Updates That Answer "Where Is My Order?"

Send buyers an update at each step between payment and delivery, so they never need to contact you to ask where their order is. Those contacts are known as WISMO ("where is my order?") requests.

A useful update sequence covers:

• Order confirmed: what was ordered, the total paid and the expected delivery date.

• Shipped: the carrier and a tracking link.

• Out for delivery or ready for pickup: the day, and where to collect it if relevant.

• Delivered: confirmation, plus how to start a return.

On a marketplace, sellers need updates too. On Bookis, DBB integrated SendGrid for email and Twilio for SMS "to keep buyers and sellers informed at each step of the transaction" (case study). For the questions that still come in, an AI support chatbot can answer order-status questions from the same order data.

Platform or build: On a platform, notification templates plus a tracking app usually cover this. On a custom build, email and SMS are triggered by order and carrier events, as with SendGrid and Twilio on Bookis.

How to check it: Place a test order and count the updates you get between payment and delivery. Check whether each one tells you where the order is and when it will arrive; there's no official threshold.

Storefront Management: Merchandising and Design Consistency

Good storefront management means your team can change what shoppers see without waiting for a code release, and every page stays consistent as the store grows.

10. Let Merchandisers Update the Storefront Without a Code Release

Give your team a way to change banners, promotions and product blocks through a content management system (CMS), so a campaign never waits for a developer. This is the practical side of ecommerce merchandising: deciding which products, offers and content shoppers see, and where.

What merchandisers should be able to change on their own:

• Promotions and banners: hero sections, sale messages and seasonal campaigns.

• Product blocks: featured, new or sale collections on the homepage and category pages.

• Campaign pages: new landing pages built from approved templates.

• Page order: which sections appear first on a page, without touching code.

For Solo Stove, Crocs and Coach, DBB engineers embedded with the retail agency Solara6 built hero and content sections, product-driven blocks, promotional components and brand-themed templates on Salesforce Commerce Cloud. The goal was that content updates happen "through the CMS rather than as code changes." Sanity reports that Tecovas, one of its customers, now launches products in under 20 minutes, with no developer tickets for content updates.

Platform or build: On a platform, the theme editor usually covers this already. On enterprise and custom builds, the flexible blocks have to be built into the CMS, as with Solara6's storefronts on Salesforce Commerce Cloud.

How to check it: Time how long it takes to swap a homepage promotion today and list everyone who has to be involved. If the list includes a developer, the check fails.

11. Use a Design System to Keep Every Page Consistent

Build your storefront from one set of reusable components, such as buttons, product cards and forms, with written rules for using them. That set is a design system, and it keeps every page looking and behaving the same way as the store grows.

Consistency matters for UX because shoppers learn your store's patterns on the first page and expect them everywhere else. It also saves engineering work: Uber reports that building with its Base design system takes 50% less code than using custom components.

DBB built a design system with documented components on Shadcn and Radix UI for Plaace, a Norwegian proptech platform, and brand-themed page templates for Solara6's retail clients.

Platform or build: On a platform, stick to one theme with shared styles and resist one-off page builds. On a custom build, maintain a design system with documented components, as with Plaace.

How to check it: Count the different button, product card and form styles across your store. More than one style for the same job is a sign the store has drifted.

Site Speed, Mobile and Accessibility: The Technical UX Foundations

Site speed, mobile usability and accessibility sit under every page of your store, so a weakness here undercuts every other practice in this guide. They're also the only three practices with an official standard to test against.

12. Pass Core Web Vitals (LCP, INP, CLS) on Product and Category Pages

Core Web Vitals are Google's three measures of real-user page experience: Largest Contentful Paint (LCP) for loading, Interaction to Next Paint (INP) for responsiveness and Cumulative Layout Shift (CLS) for visual stability. Aim for Google's "good" thresholds on your product and category pages, measured at the 75th percentile of real visits (web.dev).

Source: web.dev, 75th percentile of page loads. INP became a stable Core Web Vital in 2024, replacing FID.

In Google-published A/B tests, the faster version of Rakuten 24's site raised its conversion rate by 33.13% and revenue per visitor by 53.37% (web.dev). Vodafone sold 8% more from a page with a 31% better LCP (web.dev).

DBB engineers worked on LCP, INP and CLS for the Salesforce Commerce Cloud storefronts built with Solara6. On Plaace, they reduced the JavaScript bundle size by 50%, and they moved JLL's platform to on-demand static page generation behind a CDN.

Platform or build: On a platform, your levers are theme weight, the number of apps (each can add its own scripts) and image settings. On a custom build, the rendering strategy, JavaScript bundle size and CDN are web development decisions.

How to check it: Open PageSpeed Insights for your top product page and top category page and read the field data, which comes from real visitors. The check passes when LCP, INP and CLS are all in the "good" range.

13. Design and Test for Mobile First

Design and test every flow on a phone first, because small screens are where filters, forms and checkout buttons are hardest to get right. Mobile still lags in the benchmarks: Baymard's 2026 product page benchmark rates 38% of mobile sites "decent" or better, against 48% on desktop.

Mobile rules to check:

• Tap targets: at least 24 × 24 CSS pixels, the minimum in WCAG 2.2 (success criterion 2.5.8).

• Forms: the right keyboard for each field, such as numbers for card and phone fields, with autofill turned on.

• Filters: a filter panel that opens over the results and shows how many products match.

• Wallets: Apple Pay and Google Pay near the top of checkout.

DBB built the Bookis iOS and Android apps in React Native, for a marketplace with more than 450,000 active users. DBB also built Choo Choo's rail-ticketing platform mobile-first, and its engineers work on Omio's React Native apps.

Platform or build: On a platform, use a responsive theme and test it on real devices. On a custom build, you can design mobile-first flows or ship a native app, as Bookis did with React Native.

How to check it: Complete a purchase one-handed on a mid-range phone over a 4G connection. The official checks are tap targets of at least 24 × 24 CSS pixels (WCAG 2.2, success criterion 2.5.8) and "good" Core Web Vitals in mobile field data.

14. Meet WCAG and the European Accessibility Act

If you sell to consumers in the EU, your store has to meet the European Accessibility Act (EAA), which applies from 28 June 2025 and covers e-commerce services. The harmonized standard behind it, EN 301 549 v3.2.1, points to WCAG 2.1 levels A and AA for web content (European Commission).

Microenterprises providing services, meaning fewer than 10 employees and no more than €2 million in annual turnover or balance sheet total, are exempt under Directive (EU) 2019/882. WCAG 2.2, the current W3C Recommendation, adds criteria such as a minimum target size.

Accessible checkouts also help shoppers without a disability: readable contrast and clear labels matter on a small screen or in bright sunlight. The minimum checks from WCAG 2.2 are:

• Keyboard: every checkout action works with a keyboard alone (success criterion 2.1.1, Level A).

• Focus: the keyboard focus is always visible (2.4.7, AA).

• Contrast: body text has a contrast ratio of at least 4.5:1 (1.4.3, AA).

• Targets: tap and click targets are at least 24 × 24 CSS pixels (2.5.8, AA).

Platform or build: On a platform, check the theme's accessibility and audit every app that touches checkout. On a custom build, accessibility goes into the components from the start.

How to check it: Tab through your checkout using only the keyboard, from cart to order confirmation. The check passes when you can complete the order and always see where the focus is.

How to Run an Ecommerce UX Audit (14-Point Checklist)

An ecommerce UX audit checks your store against a fixed list of practices, then sorts the failures into platform settings and build work. Run the 14 checks below, starting with the three rows marked "start here," then speed.

Once you've chosen your fixes, test the big ones before rolling them out. When DBB redesigned the commercial real estate platform for JLL, the new design was validated with A/B tests against the existing version before rollout. If you want help, our UI/UX design practice covers everything from a UX audit to the production code that fixes it.

Platform Fix or Custom Build? How to Decide What to Do Next

Count how many of your failed checks fall in the platform column and how many in the build column. Settings and apps are a platform job you can start this week, while new integrations and flows are a build job worth scoping before you commit.

Most stores don't need a rebuild to fix the top of this list. On a platform like Shopify, showing costs early, turning on guest checkout and wallets, and adding local carriers are usually settings or apps. A rebuild starts to make sense when several failures sit in the build column at once: mixed carts from different seller types, a local payment method your provider doesn't support, or carriers your platform can't connect.

• If most fixes are platform settings: start with practices 5, 6 and 8, then work on speed (practice 12).

• If most fixes are build work: scope the rebuild before you pick a platform or a vendor, and use our breakdown of what a rebuild costs to budget for it.

DBB Software builds custom ecommerce platforms, and our AI development team adds AI features such as search when a store needs them. We'll also tell you plainly which of your fixes don't need a build at all. Get a free scope document for your ecommerce project, or talk to us about custom ecommerce development.

FAQ