Mobile commerce

Design the store for a thumb, not a mouse

Mobile e-commerce is not a smaller desktop site. The constraints change: less space, touch input, variable networks, interrupted sessions and one-handed use. A strong mobile experience prioritizes the next decision and removes anything that makes that decision harder.

Keep navigation compact but discoverable

A mobile menu should expose the catalogue in a small number of understandable levels. Search deserves prominent placement when the catalogue is large. Avoid menu structures that require repeated backtracking just to move between neighbouring categories.

Prioritize tap targets and selected states

Buttons, filters, variant chips and quantity controls need enough space to operate without accidental taps. Selected states should be obvious without relying on subtle colour differences. Sticky purchase controls can help on long product pages if they do not cover important content.

Reduce form effort

Use appropriate keyboard types, autofill-compatible fields and simple validation. Keep labels visible rather than using placeholder text as the only label. For longer forms, show progress and preserve entered information when a user moves backward.

Protect performance on product pages

Large images, review widgets, recommendation carousels and marketing scripts can make mobile pages heavy. Serve appropriately sized images, lazy-load secondary media and question every third-party script. A fast first interaction often matters more than an elaborate animation.

Support interrupted shopping

Mobile sessions are frequently interrupted. Preserve cart state, recently viewed products and progress when practical. Confirmation emails and order status pages should also work well on small screens because customers will often return to them from a phone.

Design for real mobile context

A shopper may be standing in a store, commuting, comparing a product mentioned in a message or returning from an email link. Test deep links to products, login recovery, coupon entry, maps for pickup and order-status pages on a phone. Mobile design should support these fragmented journeys rather than assuming every session begins at the homepage and ends without interruption.

Use this guide as a working document. Compare the recommendations with actual customer behaviour, support questions and operational constraints before changing the store.

Continue through the buying journey

Product pages

Open guide →

Checkout UX

Open guide →

Conversion

Open guide →