Mobile Commerce: Optimising Your Online Store for Phones

For many online stores, most visits come from phones. Yet many stores are designed on a desktop, reviewed on a desktop and only checked on a phone at the end. Shoppers on mobile are impatient, using small screens, mobile data and one thumb. If the store is awkward, they leave.

Why mobile deserves first priority

• Google primarily indexes the mobile version of your pages, so mobile quality affects search visibility.
• Conversion rates on mobile are often lower than on desktop, which means improving them has a big upside.
• Shoppers often browse on a phone and may finish on another device, so a poor mobile experience loses both.
• Data costs and patchy connections make speed matter even more in South Africa.

Check your own analytics to see how many of your visitors use phones. See Google Analytics and Search Console for small business.

Design principles for small screens

Keep navigation simple

• A clear menu with a small number of categories.
• A visible, easy-to-use search bar, since mobile shoppers rely on search.
• A cart icon that is always visible.
• Breadcrumbs so people can step back easily.

Make tapping easy

• Buttons and links at least roughly the size of a fingertip, with space between them.
• Place primary actions, such as "Add to cart", within thumb reach.
• Avoid tiny text links in dense paragraphs.

Prioritise content

On a small screen, show what matters first: product image, title, price, key options and the add-to-cart button. Put long descriptions and specifications in collapsible sections so the page does not become an endless scroll.

Use readable type

Use a font size of at least 16 pixels for body text, comfortable line spacing and strong contrast. Avoid light grey text on white. See website accessibility basics.

Speed on mobile

Slow mobile pages lose shoppers quickly.

• Compress and correctly size images. Serve smaller versions to phones.
• Lazy-load images below the fold.
• Limit third-party scripts and pop-ups.
• Use good hosting and a content delivery network.
• Test on a mid-range phone using mobile data, not just on fast office Wi-Fi.

Our speed guide covers the fixes in detail, and product photography for online stores explains how to keep images light.

Product pages on mobile

• Large, swipeable image galleries with pinch-to-zoom.
• A sticky add-to-cart button that stays visible as the shopper scrolls.
• Clear variant selectors, with size and colour options that are easy to tap.
• Delivery and returns information near the price.
• Reviews that are easy to scan.

See how to write product pages that sell.

Mobile checkout

Checkout is where mobile stores lose the most sales.

• Allow guest checkout.
• Keep the form short and use the right keyboard for each field: numeric for phone numbers, email layout for email addresses.
• Use autofill so browsers can complete names, addresses and card details.
• Offer an address lookup, to reduce typing.
• Offer local payment methods that work well on mobile, including instant EFT and, where relevant, wallets and buy-now-pay-later options. See payment gateways for South African online stores.
• Show a clear order summary and progress indicator.
• Avoid redirect confusion. If payment happens on another page, make sure customers return to your store and see a confirmation.
• Test the 3D Secure step, which can be clunky on some phones and banks.

Many of the fixes for abandoned carts apply here; see why shoppers abandon their carts.

Avoid pop-up pain

Full-screen pop-ups are especially annoying on phones and may hurt search performance. If you use sign-up prompts:

• Delay them, or show them on exit or after the shopper has engaged.
• Make the close button large and obvious.
• Do not cover content right after the page loads.

Help shoppers contact you

Add tap-to-call and WhatsApp buttons. Mobile shoppers often want a quick answer before buying. See customer service for online stores.

Test properly

Do not rely on a desktop browser pretending to be a phone.

1. Test on real devices: an older Android, a mid-range Android, an iPhone, a small and a large screen.
2. Use both Wi-Fi and mobile data.
3. Place a complete test order on your phone.
4. Test in different browsers.
5. Ask someone unfamiliar with the store to buy something while you watch silently.
6. Review mobile reports in Google Search Console and in your analytics.

Consider a progressive web app or an app?

Most stores do best with a fast, responsive website. A native app suits businesses with very frequent repeat purchasing and a large loyal base, and it costs far more to build and maintain. A progressive web app (PWA) sits in between, offering some app-like features through the browser. See mobile app vs web app for your business for how to decide.

A mobile checklist

• Simple menu and prominent search
• Large tap targets
• Readable text and good contrast
• Fast pages on mobile data
• Swipeable images and sticky add-to-cart
• Guest checkout, autofill and local payment options
• Minimal intrusive pop-ups
• WhatsApp and call buttons
• Tested on real devices

If most of your customers are on phones, treat the mobile experience as the main store and desktop as the secondary one. The improvement often shows up directly in sales.