Designing E-Commerce Journeys That Don't Fight the Shopper
The typical shopper path through an online store is straightforward: enter on a homepage or category page, navigate to a product, review details, customize if needed, add to cart, and check out. Deviations happen, of course — exploring related items or saving things to a wishlist — but this core route is what designers must build for. Friction anywhere along that path leads to abandoned sessions, not just detours.
Three areas of the interface carry most of the weight on this journey: navigation, product pages, and checkout. Each needs to be intuitive enough that shoppers barely notice it, and engaging enough that they stay on task. Below are patterns from Shopify-built stores that keep the UI out of the shopper's way.
Navigation Should Be Layered, Not Buried
Giant mega menus that force shoppers to drill through sub-categories and sub-sub-categories have largely fallen out of favor. Today's approach favors multiple, complementary navigation layers that respond to where the shopper is in their journey.
Simplify the Primary Menu
The main menu should be flattened, with one level beneath the top category headers. Apparel retailer United By Blue limits its desktop menu largely to text links organized under headers. Only the most time-sensitive or top-priority items get visual distinction — a product image for new collections or masks, a red font for sale items, a lighter blue for gifts. The treatment signals importance without overwhelming the menu.
On mobile, the same menu shrinks to fit the screen. Shoppers can't pinch and zoom on a desktop menu, so it adapts to a touch-first layout. It may require a few more taps than the desktop version, but the flattened structure keeps the extra clicks manageable. Deep, sprawling menus only work when shoppers have a mouse and a large display; they fail on small screens.
Filters and Sorting on the Results Page
Stores with large or complex inventories need a second navigation system on the product results page. Two components do the heavy lifting: filters to narrow by specification and sorting to order by shopper priorities. Horne, a home-goods merchant, aligns those controls horizontally above the product grid. A left sidebar can work, but it eats up horizontal space; the top-aligned version shows more products at once and translates cleanly to mobile, since the controls stack above the grid instead of collapsing into a hidden panel.
Consistency across devices matters more every year as shoppers switch between phone, tablet, and desktop mid-purchase. Presenting filters and sorting in the same relative position on every screen keeps the experience predictable.
Breadcrumbs and Search as Safety Nets
Deeper into the category tree, items like tentree's outdoor gear live under categories with sub-categories beneath them. A breadcrumb trail in the top-left of product pages gives shoppers a map of where they are and a quick way back. These matter most once shoppers have left the results page and lost access to filters and sorting.
Search, by contrast, must be omnipresent. Every store, regardless of size, should keep a search bar available at all times. A basic search bar helps shoppers who know exactly what they want, but an AI-powered version goes further by predicting intent while the shopper still types. Horne's search starts delivering suggestions mid-phrase, with matching keywords on the left and top-matching products on the right. The goal is to remove the cognitive load of finishing the query and scanning through every result.
Product Pages Need a 30-Second Pitch Above the Fold
A LinkedIn tip from Vitaly Friedman captures something important: if shoppers must dig for product details, many will abandon the page for a competitor. Shipping makes this painfully concrete, as 63% of cart abandonments stem from shipping costs and 36% from delivery timelines. Shoppers also want early answers on returns policies, payment options, and buy-online-pick-up-in-store availability — but cramming all of that above the fold is neither possible nor desirable.
The fix is a focused scroll. Above the fold, the page only needs enough to sell the product. Bluebella, a lingerie brand, dedicates its layout to building that pitch. The product gallery sits on the left, with the right side dedicated to a summary that's easy to scan. The hierarchical font sizing makes the essential calls-to-action legible in order: product name, price, size selector, add-to-bag and wishlist buttons, and a one-line delivery-and-returns note. Secondary material — sizing charts, fabric details, and the like — lives in collapsed accordions, so extra content is available without pushing the core interface off-screen. Where other important elements like detailed reviews lurk further down the page, in-page links from that top section route shoppers to them directly.
One caveat: that balanced product gallery sumary layout typically won't fit on mobile. There, images get top billing, and the product pitch begins just below the fold.
Keep Supporting Widgets Small and Discrete
Even a concise product description loses its impact if pop-ups and chat widgets are competing for attention. These UI extras can be designed to stay accessible without stealing focus.
Partake's food product pages show two unobtrusive options: an accessibility controls launcher anchored bottom-left and a loyalty program pop-up styled as a chat widget placed bottom-right. Both widgets sit out of the product's content flow and only expand when a shopper clicks them. Allbirds uses similar restraint: a self-service chat launcher in the corner requires an explicit click to open, while time-sensitive messages about return policy stay pinned in a slim sticky bar above, leaving the product content itself untouched.
Match the Selector to the Choice
When a shopper has to pick a product variant before adding it to the cart, the interface should make that decision feel trivial. The right control depends entirely on the nature of the options being offered.
On clothing and apparel sites, colors and sizes are usually best represented as visible, clickable elements rather than hidden inside drop-down menus. A color variant benefits from a row of swatches — the shopper can see the actual hue at a glance, and the product photo updates along with a text label confirming the selection. Sizing, which varies by brand and region, pairs well with a clearly marked size chart link so shoppers can resolve uncertainty without leaving the page.
Kirrin Finch demonstrates a useful distinction between the two types of selectors: sizes live in outlined boxes, while color swatches sit inside filled circles. The visual separation helps shoppers understand which choice they are making at each step and prevents them from skipping a required field. It is a small design detail, but it keeps the decision flow smooth.
When Drop-Downs Are the Better Fit
Not every variant needs boxed buttons. For products where options don't lend themselves to uniform visual representation — take mattress sizes, for example — a drop-down list can be the more effective and honest design choice. Box selectors would either force inconsistent sizing or leave awkward white space when labels vary in length.
Leesa's mattress page uses this limited space wisely. The drop-down does more than list sizes; it embeds additional context directly in the options, such as the regular versus sale price for each size. This approach consolidates a lot of information into a compact control without cluttering the rest of the product page.
Never Hide Out-of-Stock Results
Friction appears the moment a shopper discovers their preferred variant is unavailable. The worst time for that discovery is after they have committed to a product and selected their options. Out-of-stock variants should be visually distinct from the moment the page loads.
Kirrin Finch handles this with a clear visual treatment — available options are plainly marked, while unavailable ones are unmistakably greyed out. There is no ambiguity about what can be selected and what cannot.
While some shoppers may still feel disappointment when they see their size or color is gone, that frustration is far less than the annoyance of selecting a product, reading about it, and building up intent — only to be blocked at the final step. If the variant selection is the last interaction before the cart button, the availability status must be transparent from the start.
Designing for Invisible Progress
E-commerce interfaces should move shoppers forward without demanding their attention. The visual identity of a store can be bold and memorable, but the UI that guides the purchase journey needs to feel familiar and frictionless. When a shopper doesn't have to pause to understand how a control works, the design is doing its job.
Good UI design for product variants comes down to a few key principles: show options visually when they are inherently visual, use compact controls when the data demands it, and always surface availability early. When these elements work as they should, shoppers barely notice them at all — they simply make their choice and move on.
