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 has more than 10 fields, roughly double what most transactions require. On mobile, typing is slower and more error-prone than on desktop, so every unnecessary field significantly increases the chance of abandonment. Baymard Institute research confirms form length is one of the primary friction points in mobile checkout.

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 allow checkout in one to two taps for returning customers, bypassing form-filling entirely. These are the single highest-impact fix for mobile checkout abandonment. Many Shopify stores either do not have them enabled or bury them below the standard checkout form where mobile users never see them.

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. Beyond express payments, the question of guest checkout versus forced account creation is the other major checkout abandonment driver worth addressing.

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

The minimum recommended tap target size is 44x44px. Many Shopify themes fall below this for variant selectors, quantity steppers, and cart remove buttons. Elements that are too small require multiple tap attempts, which creates visible friction and erodes confidence in the store's quality. Test on a real device, not a browser emulator, to find problem areas.

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 when active. If a form field is positioned in the lower half of the viewport, the keyboard will often obscure it when focused, forcing the user to scroll to see what they are typing. This is especially damaging at the payment step where errors are costly and confidence must be highest.

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 create uncertainty about how many steps remain. On mobile, that uncertainty translates directly into abandonment because shoppers cannot judge whether completing the process is worth the effort. Shopify's native checkout includes a step indicator by default, but custom implementations sometimes remove it.

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

Every additional step between "add to cart" and "checkout" is a drop-off risk on mobile. Themes using mini-carts that require page refreshes, or cart pages that navigate away from the product, add unnecessary steps. A slide-out cart drawer that keeps shoppers on-page with a prominent checkout button at both top and bottom is the best-performing mobile cart format.

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. The full Shopify cart UX guide covers what the cart experience should include before the visitor reaches checkout.

---

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. Unexpected fees appearing at checkout are a common additional factor, particularly for mobile shoppers who made their purchase decision on a product page without a clear price-to-delivered cost breakdown.

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