Shopify checkout, explained
How Shopify's checkout actually works in 2026, including Checkout Extensibility, Shop Pay, what you can customize without Plus, and what to do when it breaks. The practical guide for ecommerce operators, not Shopify's marketing.
What is Shopify checkout?
Shopify checkout is the final flow a customer goes through to complete a purchase on a Shopify store: contact information → shipping → payment → confirmation. It's hosted and run by Shopify rather than by your theme, which is why you can't fully control it the way you control product or collection pages.
Shopify has replaced the old checkout.liquid template (Shopify Plus only) with Checkout Extensibility, a modular system based on Checkout UI Extensions, Functions, and Web Pixel Extensions. checkout.liquid is no longer supported for the Information, Shipping and Payment steps.
This matters because the new system is more powerful but also more brittle: every extension is a new failure mode that can silently break checkout for some segment of your traffic.
How Shopify checkout works, step-by-step
The customer-facing flow is 3-4 steps depending on store configuration. Each step has its own failure modes that don't show up in your Shopify Analytics dashboard.
Contact information
Customer enters email + optional phone. This is also where Shop Pay logged-in customers get auto-recognized and offered one-click checkout. Failure mode: Shop Pay JavaScript fails to load → Shop Pay button doesn't appear → customer fills the long form instead → higher abandonment.
Shipping
Customer enters address, sees shipping rates. Rates come from your shipping zones config + any third-party rate calculators (Easyship, Shippo, real-time carrier APIs). Failure mode: rate calculator times out or returns error for specific zones → customer sees 'no shipping methods available' → leaves.
Payment
The payment form loads, with card fields from your payment provider. Apple Pay / Google Pay / Shop Pay buttons may appear here. Failure mode: the payment section fails to load in one browser, for example Safari on iPhone → customer sees a blank section → leaves. Nothing in your admin tells you it happened.
Order review + place order
Customer reviews cart, sees total with shipping + tax, applies promo code if not already, clicks Place Order. If the card issuer asks for 3D Secure, the customer completes a bank challenge before the payment goes through. Failure mode: promo code logic broken → wrong total → customer confused, leaves. Or the 3D Secure challenge doesn't complete → the payment fails and the customer gives up.
What you can (and can't) customize
Customization options depend on whether you're on regular Shopify or Shopify Plus:
- Branding (logo, colors, typography)
- Form field labels via theme settings
- Checkout UI Extensions (limited)
- ✕Custom HTML/Liquid templates
- ✕Custom shipping/payment logic
- Everything in regular Shopify
- Shopify Functions (discounts, payments, shipping)
- Custom checkout extensions (full extensibility)
- Headless / hydrogen integrations
- B2B checkout flows
Shopify Checkout Extensibility, in 90 seconds
Checkout Extensibility is Shopify's replacement for checkout.liquid. It splits checkout customization into three building blocks:
- Checkout UI Extensions: React-based components that render in pre-defined extension points (above payment, below shipping, etc.).
- Shopify Functions: Server-side logic for discounts, shipping rates, payment methods, and delivery customizations.
- Web Pixel Extensions: Sandboxed analytics + marketing pixel runtime (replaces the wild-west of script injection).
The upside: more powerful, more secure, more upgrade-safe than checkout.liquid was. The downside: every extension is a new failure surface. When a Function deploy goes wrong or a UI Extension errors, part of checkout can stop working without any warning to you.
Read the full Checkout Extensibility guideHow to test your Shopify checkout
There are three levels of Shopify checkout testing, and many stores only do the first one:
- Level 1
Manual smoke test
You manually click through checkout in Chrome after every deploy. Quick, but misses anything that breaks on Safari on iPhone, mobile Chrome, specific shipping zones, or specific discount combinations. Many stores stop here.
- Level 2
Pre-deploy automated test
A CI pipeline runs Playwright or Cypress tests against checkout before each deploy. Catches regressions before they ship, but requires a developer to maintain the test code. Many stores don't have this.
- Level 3
Scheduled production checkout testing
A synthetic monitoring service replays checkout against your live store on a schedule (weekly, daily or hourly). It can catch regressions from theme updates, app updates, Shopify-side changes and third-party API outages, not just your own deploys, on the steps the test covers. This is what Tracefox does.
Why level 3 matters more for Shopify
Many Shopify checkout failures come from outside the store owner's control: a Shopify app auto-updates, the theme developer pushes a fix, a third-party shipping API rate-limits. Pre-deploy testing only catches problems YOU introduce. Scheduled production testing also catches changes other people make, on the steps your test covers.
See Tracefox for Shopify checkout testingWhat to do when Shopify checkout breaks
Quick diagnostic order, starting with the fastest checks:
- 1
Test Safari on a real iPhone first
Many shoppers buy on iPhones, and Safari behaves differently from Chrome. Use a real iPhone, not Chrome dev tools.
- 2
Check your active app updates
Look at the Shopify admin → Apps → updates installed in the last 7 days. Disable the most recent one and retest.
- 3
Try a known-good test coupon
Apply a 100%-off test coupon at checkout. If it doesn't apply correctly, your discount logic broke (Functions, app, or rule).
- 4
Test from a different shipping zone
Add an address from a region you don't ship to often. If rates don't load, your shipping calculator has a regional bug.
- 5
Check Shopify status
shopifystatus.com, sometimes the issue is on their side. Rare but worth a 10-second check.
Make sure Shopify checkout works,
before customers find out it doesn't.
Tracefox tests your Shopify checkout on a schedule in Chromium, on the desktop, mobile or tablet viewport you pick for each test, and emails you when a scheduled run fails. Keep testing Safari and Apple Pay on a real iPhone yourself.
Test your Shopify checkout freeFree plan: 1 checkout test, no credit card · Paid plans include a 7-day trial