Picture a mid-sized homeware brand on Shopify Grow, selling across South Africa and into the UK. Add-to-cart is healthy. begin_checkout fires reliably. But purchase completion sits well below what the traffic and cart data would suggest, and Shopify's conversion figure and the finance team's order count disagree by a margin that cannot be explained by returns alone. That is the exact scenario this playbook addresses - not a generic tips list, but a diagnostic sequence for stores where the cart works and the completion step leaks.
Why Checkout Is a Measurement Problem Before It Is a Design Problem
Most teams reach for a redesign the moment checkout completion looks weak. That instinct is expensive and often wrong. The checkout is simultaneously the most constrained part of the store (platforms limit what you can change) and the most fragile part of the measurement stack (consent banners, cookie restrictions and payment redirects break attribution precisely at the highest-intent step). Before you touch a single field, confirm whether the leak is real or an artefact.
A checkout conversion that looks worse than reality is frequently a tracking gap, not a UX failure. Reconcile before you redesign.
Map the Funnel Events Before You Touch a Single Field
GA4 gives you four events to anchor the diagnosis: add_to_cart → begin_checkout → add_payment_info → purchase. The drop between begin_checkout and purchase is your checkout leak. The gap between GA4 purchase and backend or Shopify orders is your attribution leak. They require different fixes. Pull 90 days of data and segment by device, new versus returning, and payment method where available.
The two leaks, defined
| Leak | Where you see it | Fix direction |
|---|---|---|
| Checkout leak | begin_checkout → purchase drop in GA4 | Form, payment, shipping, mobile UX |
| Attribution leak | GA4 purchase vs backend orders | Server-side tagging, consent mode, reconciliation |
The Three Checkout Layers and Their Distinct Failure Modes
- Identity layer: email, account creation vs guest, address capture. Fails when autocomplete is missing or account creation is forced.
- Logistics layer: shipping method, delivery estimate, tax. Fails when cost appears late.
- Payment layer: method visibility, 3DS/SCA, redirect vs on-site. Fails when trust signals are absent or verification is unexplained.
What You Can and Cannot Change: Shopify Basic, Grow, Plus and WooCommerce
This is where most advice collapses into theory. Shopify's checkout.liquid customisation was deprecated for non-Plus merchants. Basic and Grow merchants are largely limited to Checkout Branding (logo, colours, typography) and native checkout settings. Plus merchants unlock checkout extensibility and Checkout UI extensions for custom fields and in-checkout upsells. WooCommerce splits into the legacy [woocommerce_checkout] shortcode and the newer Cart/Checkout Blocks - the latter is FSE-compatible but constrains how you extend layout.
| Platform | Typical control | Where the limit bites |
|---|---|---|
| Shopify Basic/Grow | Branding + settings | No custom fields or layout logic |
| Shopify Plus | Checkout UI extensions | Requires dev resource |
| WooCommerce shortcode | Template overrides | Fragile across plugin updates |
| WooCommerce blocks | Block patterns + extensions | Limited third-party support |
Form Design That Reduces Friction: Fields, Autocomplete and Error Messaging
The highest-leverage, lowest-cost fix in checkout is correct HTML autocomplete attributes. They enable browser autofill and trigger the right mobile keyboard. Getting them wrong silently increases friction at every order.
<input type='email' autocomplete='email'>
<input type='tel' autocomplete='tel'>
<input type='text' autocomplete='address-line1'>
<input type='text' autocomplete='postal-code'>
<input type='text' autocomplete='cc-number'>
<input type='text' autocomplete='cc-exp'>
<input type='text' autocomplete='cc-csc'>Validate on blur, not on keystroke. Show the error next to the field, in plain language, and never clear the whole form on a single failed field.
Guest Checkout vs Account Creation: Where the Real Leak Usually Sits
Forcing account creation before purchase is a well-documented abandonment driver. But the opposite error is just as common in South Africa: hiding account creation entirely so repeat buyers cannot save addresses or payment methods across sessions. Offer guest checkout first with a single post-purchase prompt to create an account. On WooCommerce shortcode checkout, that means modifying the accounts section of the template; on Shopify non-Plus, it means using the native setting and accepting the default flow.
Payment-Method Visibility, 3DS/SCA and Local South African Trust Signals
Show the payment methods you accept before the payment step, not after. In South Africa, buyers look for instant EFT, Payfast, Ozow, Yoco, Peach Payments and Payflex alongside Visa and Mastercard. Each method changes the flow: some redirect, some embed on-site, some add a verification step. 3DS/SCA (mandatory under PSD2 in the EU/UK) inserts a bank verification step. Explain it before it happens rather than surprising the buyer mid-redirect.
Recognised local and international payment marks placed above the payment step act as trust signals, not decoration.
Shipping and Tax Transparency: The Abandonment Driver Most Stores Ignore
Baymard's long-running checkout research consistently identifies unexpected shipping cost as a primary abandonment reason. If your store reveals delivery cost only at the final step, you are engineering the leak. Show or estimate delivery cost and time at cart, or as early in checkout as the delivery address allows. Display the currency clearly in ZAR for domestic orders and be explicit about whether tax is included.
Mobile Checkout: Keyboard Types, Tap Targets and the Sticky CTA
Most South African ecommerce traffic arrives on mobile. Use inputmode and correct type attributes so numeric fields summon a numeric keyboard. Keep primary tap targets at least 44×44px and avoid horizontal scroll at any breakpoint. A sticky call-to-action that follows the scroll on mobile reduces the search cost of finding the pay button. Keep speed discipline light here - Core Web Vitals and INP at p75 are covered in depth elsewhere; cross-link rather than duplicate.
Consent Mode, POPIA and Why Your Checkout Conversion Looks Worse Than It Is
POPIA in South Africa and GDPR/UK GDPR in Europe require consent banners and, increasingly, consent mode v2. When a user declines analytics cookies, the checkout purchase event may not fire at all. That is a measurement artefact, not a UX failure. The fix is server-side tagging via the Conversions API or Enhanced Conversions, plus reconciliation against backend and Shopify order counts. See the custom reporting approach for how this reconciles in practice.
| Metric | Primary source | Why it disagrees | Reconciliation |
|---|---|---|---|
| Checkout completion rate | GA4 begin_checkout → purchase | Consent blocks, redirects, ITP | Server-side events |
| Checkout-attributed revenue | Shopify / WooCommerce orders | Refunds, manual orders, B2B terms | Weekly order-count match |
| Payment-step drop-off | add_payment_info → purchase | 3DS redirect exits funnel | PSP-side completion data |
How to Test Checkout Changes Without Enough Purchase Volume
Checkout A/B testing requires purchase volume that many South African stores do not have. A two-week test on 300 monthly orders will not reach significance. Use sequential before/after with a stable baseline window instead: hold the checkout unchanged for four weeks, record completion rate and revenue, make one change, hold again, and compare like-for-like. Treat direction as a hypothesis, not proof. For a fuller framework, explore the conversion rate optimisation service.
Low-volume stores should not run short A/B tests on checkout. Sequential testing with a stable baseline is more honest.
Outcomes: The Two Metrics That Prove Checkout Work Actually Paid Off
Two metrics matter. First, checkout completion rate (begin_checkout → purchase). Second, checkout-attributed revenue reconciled against backend orders. Both must move together. Completion rate alone can rise while revenue falls if you have removed payment methods buyers wanted. Reconcile weekly, and investigate any gap greater than roughly 5-10% (a directional estimate, not a benchmark claim). If you are weighing structural checkout changes alongside broader site work, the web design team can help scope what is realistically changeable on your platform before you commit budget.
