Mobile Checkout UX: Why 70% of Mobile Shoppers Abandon (And How to Stop It)

Mobile devices account for over 70% of ecommerce traffic. Mobile checkout abandonment sits at around 85%, compared to roughly 73% on desktop. That gap represents an enormous amount of revenue left on the table, and most of it comes down to friction that's entirely preventable.

Here are the checkout UX problems that drive mobile abandonment, and how to fix them.

1. Too many form fields

The average checkout form contains more than 10 fields. Research from Baymard Institute shows this is roughly double what's actually necessary for most transactions.

Every extra field is a reason to stop. On mobile, typing is slower and more error-prone than on desktop. Every unnecessary keystroke increases the chance of abandonment.

Fix it: Audit your checkout form field by field. Ask whether each piece of information is genuinely required at the time of purchase. Fields to reconsider:

• Separate first and last name fields (one full name field works)
• Address Line 2 (make it optional and collapsed by default)
• Phone number (only include if you actually call customers)
• Company name (relevant for B2B, not general DTC)

Shopify's native checkout is reasonably well-optimised here, but many themes and apps add fields unnecessarily.

2. Express payment options are hidden or missing

Shop Pay, Apple Pay, Google Pay, and PayPal all allow checkout in 1–2 taps for returning customers. They bypass the form-filling problem entirely.

For mobile shoppers especially, these are conversion gold. They eliminate the biggest single source of friction. Yet many Shopify stores either don't have them enabled, or bury them below the standard checkout form.

Fix it: Enable all express payment options your customers are likely to use. Place them at the top of the checkout flow, above the form, not as an afterthought at the bottom. On product pages, consider enabling "Buy Now" buttons that go straight to checkout.

3. Tap targets are too small

A button that looks fine on a desktop design mockup may be nearly impossible to tap accurately on a phone. The minimum recommended tap target size is 44x44px. Many Shopify themes fall short of this, particularly for:

• Size and colour variant selectors
• Quantity steppers (+/-)
• Remove item buttons in the cart
• Checkbox fields in checkout

Fix it: Test your checkout on a real device, not just a browser emulator. Try tapping everything quickly, as a real user would. Flag anything that requires precise aim or multiple attempts.

4. The keyboard covers form fields

On mobile, the on-screen keyboard takes up roughly half the screen. If a form field is positioned in the lower half of the viewport, the keyboard will often obscure it when that field is focused, and the user has to scroll to see what they're typing.

This is especially problematic on the payment details step, where confidence matters most.

Fix it: This is largely a theme and Shopify checkout behaviour issue, but you can test it by going through your checkout on an iPhone and Android device and watching what happens when you tap into each field. If fields disappear behind the keyboard, it's worth raising with a developer.

5. No progress indicator

Multi-step checkouts without a progress indicator leave mobile users uncertain how much is left. Uncertainty creates anxiety. Anxiety creates abandonment.

Fix it: Ensure your checkout shows a step indicator (e.g. "Step 2 of 3: Payment"). Shopify's native checkout does this by default, but custom checkout implementations sometimes remove it.

6. The cart requires too many steps to reach checkout

Some Shopify themes use a mini-cart that requires a page refresh, or a cart page that involves navigating away from the product. Every additional step between "add to cart" and "checkout" is a drop-off risk.

Fix it: Use a slide-out cart drawer that keeps the customer on-page. Include a clear, prominent "Checkout" button at the top and bottom of the cart drawer, not just at the bottom.

---

Mobile checkout optimisation isn't a single fix. It's a series of small friction reductions that compound. If your mobile conversion rate is significantly lower than your desktop rate, the gap almost always traces back to a combination of the issues above.

Our UX Audit includes a full mobile review of every key page, with specific recommendations for your store.