Why can't customers find the button to actually pay on mobile checkout?

Shoppers on phones say they can't find a way to actually pay - here's how to figure out whether it's your checkout customizations, an app conflict, or a genuine Shopify rendering bug.

checkoutmobileconversionapps

What's going on

A merchant will notice this because a customer sends a screenshot: they've filled in their shipping details on their phone, and there's simply no obvious button to finish the order. No "Pay now," no "Complete order" - just a form that seems to end without a way to submit it. It doesn't show up in analytics as a clean error; it shows up as abandoned carts and confused screenshots in your inbox, which is exactly why it's easy to miss until several customers hit it.

This is a checkout-specific problem, not a general theme bug. Since Shopify moved every store to checkout extensibility (the old checkout.liquid editing model is retired), your checkout's layout is controlled through Settings > Checkout in the admin and through checkout UI extensions from apps - not through your theme files. That means the usual theme-editor preview won't show you what's actually broken, and the cause is almost always something layered on top of Shopify's default checkout: a customization, a script, or an app - rather than Shopify's base checkout being broken for everyone.

Mobile is where this shows up because narrow viewports have far less room for error. A trust-badge block, an upsell offer, or a sticky order-summary accordion that looks fine on a 1440px desktop screen can easily push the actual payment button below the fold, overlap it, or leave it hidden behind another element on a 375px phone screen.

Why it happens

The most common root cause is something added to checkout after the fact - a checkout UI extension from an app (upsells, trust badges, rewards, custom fields) or, on older Plus stores, custom scripts from the legacy checkout.liquid - that was built and tested on desktop and never verified on a small screen. These additions can push content down, overlap the payment button, or in rare cases throw a JavaScript error that stops the rest of the page from finishing its render.

A second, less common cause is a genuine timing issue: dynamic payment buttons (like Shop Pay's accelerated checkout button) can take a moment to render, and on a slow mobile connection that delay can look identical to "there's no button at all," especially if a customer doesn't think to wait or scroll.

Occasionally it is a real rendering bug in Shopify's own checkout for a specific device/browser/viewport combination - rarer, but it does happen, and it's worth ruling out your own customizations first since that's the far more frequent culprit.

5 ways to fix it

1

Preview your actual checkout on a real phone, not just the theme editor

Shopify's theme customizer preview doesn't reflect checkout at all - checkout is a separate, Shopify-hosted flow since the move to checkout extensibility. Go to Settings > Checkout in your admin, open the checkout editor, and use its device preview alongside a real test order on your own phone (Safari on iOS and Chrome on Android behave differently). Look specifically for the Pay now / Complete order button after you've filled in shipping and picked a payment method - confirm it's visible without scrolling past something that looks like the end of the form.

2

Audit what's been added to checkout - extensions, scripts, and branding blocks

Open the checkout editor and review every section and block for anything a plugin or a previous developer added: post-purchase upsell blocks, trust-badge widgets, custom fields, or reordered blocks. Any of these UI extensions can push the actual payment button out of the visible viewport on narrow screens, especially if it was designed and tested only on desktop. Remove or reposition anything that isn't essential and re-test on mobile.

3

Disable checkout apps one at a time to find the conflict

If you run apps that inject content into checkout (upsells, free-gift/rewards apps, trust badges, custom checkout fields, analytics pixels), disable them one by one and reload checkout on mobile after each. Apps that add checkout UI extensions or legacy checkout.liquid scripts are the most common cause of a button being pushed off-screen, overlapped, or hidden behind another element. Once you isolate the culprit, check for an updated version, adjust its placement in the checkout editor, or remove it.

4

Check for JavaScript errors and slow-loading dynamic payment buttons

Open your mobile browser's remote debugging tools (or Safari's Web Inspector connected to an iPhone) on a live checkout and watch the console while the payment step loads. A script error thrown by a third-party app can stop the rest of the page - including the order button - from rendering. Also confirm the delay isn't just Shop Pay or another dynamic payment button taking a moment to render, which can look like a missing button on a slow connection.

5

If it's a rendering bug in Shopify's own checkout, contact Shopify Support

Since checkout markup and core layout are hosted and controlled by Shopify (not your theme), a genuine rendering bug - as opposed to something your apps or customizations introduced - is Shopify's to fix. Report it with your test device, browser, and screenshots so their support team can reproduce it, especially if the same page renders fine on desktop or on a different device.

Bottom line

Nine times out of ten this turns out to be a checkout customization or app conflict pushing the real button out of view, not a bug in Shopify's checkout itself - so the fastest path is disabling extras one at a time and testing on a real phone before assuming anything is broken. If you don't have the time or patience to audit checkout extensions and app conflicts yourself, a one-time checkout/mobile QA review from a Shopify developer can usually track it down in under an hour.

Still Stuck?

Browse the rest of the problem library, run a free storefront scan to catch issues like this automatically, or email us and we'll work out a custom solution for it.