Quick Answer: JOTT's reported ~10% purchase completion lift came from migrating to Shopify checkout extensibility and deleting legacy checkout.liquid customisations, not adding features. For APAC, the transferable levers are local payment method coverage, mobile address-entry design, and conversion tracking rebuilt via web pixels and server-side APIs.

JOTT Shopify Checkout Optimization Conversion: A Field Guide for APAC Merchants

A French outerwear brand walks into a checkout rebuild with a problem most of our enterprise clients in Hong Kong, Singapore and Sydney share: the product pages convert fine, the cart fills, and then a tenth of the revenue quietly leaks out somewhere between "Checkout" and "Pay now." JOTT — Just Over The Top, the down-jacket label sold across Europe and increasingly in Asia — is one of the more useful public reference points for what happens when you stop treating checkout as a styling exercise. The reported outcome of the JOTT Shopify checkout optimization conversion work was roughly a 10% improvement in purchase completion, delivered not by adding features but by rebuilding checkout on Shopify's extensibility framework and removing the friction that a decade of checkout.liquid hacks had accumulated, according to Shopify's own enterprise case documentation.

Related reading: Salesforce CDP Genie Features 2026: An APAC Retail Reality Check

Related reading: Shopify Plus to Headless Commerce Migration: APAC Playbook

Related reading: Haruna Kojima Shopify Plus Case Study APAC: Stack Breakdown

Related reading: MR DIY Malaysia Adobe to Shopify Migration: Cost & Ops Lessons

I want to unpack that number honestly, because the way it gets quoted online — usually as "switch to checkout extensibility, get 10%" — is wrong. Then I want to translate it for the market we actually operate in, where the mobile share is higher, the payment mix is fragmented, and a Stripe-plus-Shop-Pay stack alone will not get you to a competitive completion rate.

The brand that improved checkout by removing things

JOTT's situation before migration is familiar. A high-AOV apparel brand, seasonal demand spikes (outerwear sells in a compressed window), multi-country storefronts, and a legacy checkout carrying custom Liquid: hand-rolled trust badges, a shipping-method note, a discount explainer, and several scripts that had each been justified at some point by a different growth experiment.

When Shopify deprecated checkout.liquid — information, shipping and payment pages on 13 August 2024, and the Thank You and Order Status pages on 28 August 2025, per Shopify's developer documentation — brands like JOTT had no choice about migrating. What they did have a choice about was whether to port every legacy customisation forward or use the migration as an audit.

The interesting part of the JOTT case, as documented in Shopify's own enterprise material, is that the conversion gain came alongside a reduction in checkout surface area. Fewer custom blocks, fewer scripts competing for the first viewport, native one-page checkout instead of a three-step flow. That's the pattern we see repeatedly: the Liquid customisations that get added over four years are almost never re-tested against each other, and the compound effect is a slower, noisier page.

Baymard Institute's aggregate of 49 studies puts average documented cart abandonment at 70.19%, and its research consistently attributes a large share of abandonment to checkout mechanics — forced account creation, unclear delivery cost, and long or confusing forms — rather than price. Every custom block you add to checkout is competing with the one thing the shopper came to do.

What checkout extensibility actually replaced

If you're evaluating this on a Shopify Plus contract in APAC, be precise about what changed technically, because the conversion story depends on it.

Related reading: Customer Data Management CDP Strategy 2026: An APAC Playbook

The old model. checkout.liquid gave you template-level control. You could inject anything, including render-blocking third-party JS. Shopify could not upgrade your checkout independently, so you sat on whatever version your theme forked from, and you missed platform-level performance and payment work.

The new model. Checkout is Shopify-rendered and Shopify-upgraded. You extend it through:

• Checkout UI extensions — sandboxed JS/React components at defined extension targets (delivery address, payment method, order summary, Thank You page).
• Shopify Functions — server-side logic for discounts, delivery and payment customisation, running in the platform rather than as Scripts.
• Branding API — typography, colour and corner radius applied declaratively, not via injected CSS.
• Web pixels — sandboxed analytics, which is also where most APAC tracking breaks if you don't plan for it.

The practical consequence: your customisations can no longer slow the critical path down arbitrarily. Shopify reports that its checkout converts up to 15% better than other commerce platforms based on its own comparative data — treat vendor benchmarks as directional, but the mechanism is plausible, because Shopify is optimising one shared rendering path across millions of orders and you are not.

Why a 10% completion lift comes from restraint, not features

Here is the honest reading of the JOTT result. A ~10% improvement in purchase completion on a high-AOV apparel business is large, and it almost certainly decomposes into several things happening at once:

1. One-page checkout replacing a multi-step flow. Fewer page transitions, fewer drop-off points, and on mobile networks, materially fewer round trips.
2. Removal of legacy scripts from the critical rendering path.
3. Express payment placement — Shop Pay, PayPal and wallets surfaced above the form rather than buried. Shopify states that Shop Pay's accelerated checkout converts significantly better than guest checkout for returning buyers; the mechanism is stored credentials plus one-tap authentication, which is the same reason Apple Pay and Google Pay outperform card forms.
4. Localisation done properly per market rather than a single flow with a currency switcher.

Notice that none of those are "we added a countdown timer." When people search for how to use JOTT Shopify checkout optimization conversion tactics, they're usually looking for a widget list. The transferable lesson is the opposite: the migration was permission to delete.

When we've run this exercise for a listed Greater China jewellery retailer and for a multi-brand catering group in Hong Kong, the same question does most of the work: for each custom element in checkout, who owns it, what did it move, and when was that last tested? Elements with no owner and no measurement get cut. That's not a growth hack; it's housekeeping that happens to be worth revenue.

Mobile-first in APAC means thumb-first, not responsive

DataReportal's Global Digital reports have mobile accounting for the majority of web traffic globally, and the mobile share of e-commerce sessions in Southeast Asia runs higher still — Google, Temasek and Bain's e-Conomy SEA research has consistently described the region's digital economy as mobile-dominant, with a large share of first-time internet users who never had a desktop phase, according to the e-Conomy SEA 2024 report.

That changes checkout design in specific ways:

Address entry is the biggest single form cost

Hong Kong addresses don't have postcodes. Japanese addresses run in the opposite order to Western conventions. Indonesian addresses depend on kecamatan/kelurahan hierarchies that don't map to a generic "City / State" pair. Vietnam's administrative units were restructured in 2025, which breaks any hard-coded province list.

Shopify's native address autocomplete and per-country address formatting handles more of this than most teams realise — which is another argument for not overriding it. Where you do need control, use a delivery-address extension target rather than a custom form.

Keyboard and input types matter more than layout

A phone-number field that opens an alphabetic keyboard costs you conversions in every market with a high mobile share. So does a postcode field that's required in a market with no postcodes.

Network conditions are not uniform

A checkout that feels instant on Singapore fibre behaves differently on a 4G connection in the Philippines or regional Indonesia. This is the strongest technical argument for the extensibility model: Shopify-rendered checkout with sandboxed extensions has a performance ceiling that your custom Liquid did not.

Local payment methods are the real conversion lever

If you take one thing from this into an APAC rollout: the payment mix is where a 10% completion gain is most likely to hide, and it is market-specific.

J.P. Morgan's payments research has repeatedly documented that digital wallets now lead e-commerce payment share across much of Asia-Pacific, with card share materially lower than in the US or UK, according to J.P. Morgan's 2025 payments trends report. Concretely, that means:

• Hong Kong — cards remain strong, but FPS, AlipayHK, WeChat Pay HK and Octopus matter, especially for lower-AOV baskets.
• Mainland China cross-border — Alipay and WeChat Pay are effectively mandatory.
• Taiwan — LINE Pay, JKOPAY, and convenience-store/ATM transfer flows, which are not card rails at all.
• Singapore / Malaysia — PayNow, GrabPay, Touch 'n Go eWallet, FPX bank transfer.
• Indonesia / Philippines — GoPay, OVO, DANA, GCash, Maya, plus virtual-account bank transfer and — still — cash on delivery.
• Australia / New Zealand — cards plus wallets, with BNPL (Afterpay, Zip) exerting real influence on AOV in apparel.

A global brand running one checkout with Visa, Mastercard and PayPal is not competing on equal terms in six of those markets. The fix is not a plugin; it's a payment-provider architecture decision — typically Shopify Payments where available plus a regional PSP such as Adyen, Stripe, 2C2P or Asiabill for local methods, then Shopify Functions to control which methods appear where.

The trade-off is real and worth stating: every additional payment method adds reconciliation work, settlement timing variation, refund-handling complexity and a new failure mode for your finance team. Adding twelve wallets because a blog post said so is how you create a month-end close problem. Add them where volume justifies operational cost, and measure per-method completion rate.

Building it: extensions, functions, and conversion tracking

The implementation path is well-documented, so here's the shape of it rather than a tutorial.

Scaffold an extension with Shopify CLI:

1npm init @shopify/app@latest
2cd my-checkout-app
3shopify app generate extension --template checkout_ui
4shopify app dev

A minimal checkout UI extension that surfaces a market-specific delivery note — the kind of thing that used to be a Liquid injection:

1// extensions/checkout-note/src/Checkout.jsx
2import {
3  reactExtension,
4  Banner,
5  useApi,
6  useLocalizationCountry,
7} from '@shopify/ui-extensions-react/checkout';
8
9export default reactExtension(
10  'purchase.checkout.delivery-address.render-after',
11  () => <DeliveryNote />,
12);
13
14function DeliveryNote() {
15  const country = useLocalizationCountry();
16  const {i18n} = useApi();
17
18  // Only render where it earns its place in the viewport.
19  if (!['HK', 'TW', 'SG'].includes(country?.isoCode)) return null;
20
21  return (
22    <Banner status="info">
23      {i18n.translate('sameDayCutoff')}
24    </Banner>
25  );
26}

The shopify.extension.toml declares the target and any network access, which is what keeps it sandboxed:

1api_version = "2025-07"
2
3[[extensions]]
4type = "ui_extension"
5name = "checkout-note"
6handle = "checkout-note"
7
8  [[extensions.targeting]]
9  target = "purchase.checkout.delivery-address.render-after"
10  module = "./src/Checkout.jsx"

For payment and delivery logic, use Shopify Functions rather than client-side conditionals. A payment customisation that hides cash on delivery above a basket threshold in a specific market:

1// extensions/payment-rules/src/run.js
2export function run(input) {
3  const total = parseFloat(input.cart.cost.totalAmount.amount);
4  const country = input.cart.deliveryGroups?.[0]?.deliveryAddress?.countryCode;
5  const cod = input.paymentMethods.find((m) => m.name.includes('Cash on Delivery'));
6
7  if (!cod || country !== 'PH' || total <= 8000) {
8    return {operations: []};
9  }
10
11  return {
12    operations: [{hide: {paymentMethodId: cod.id}}],
13  };
14}

Conversion tracking is where APAC stacks break

The jott shopify checkout optimization conversion api and conversion tracking searches point at a genuine pain: once checkout is sandboxed, you cannot drop arbitrary pixels into it. You register web pixels instead.

1// extensions/analytics-pixel/src/index.js
2import {register} from '@shopify/web-pixels-extension';
3
4register(({analytics, browser, settings}) => {
5  analytics.subscribe('checkout_completed', (event) => {
6    const checkout = event.data.checkout;
7    browser.sendBeacon(settings.endpoint, JSON.stringify({
8      orderId: checkout.order?.id,
9      currency: checkout.currencyCode,
10      value: checkout.totalPrice?.amount,
11      paymentMethods: checkout.transactions?.map((t) => t.gateway),
12    }));
13  });
14});

Budget real engineering time for this if you run WeChat, LINE, TikTok or Meta conversion APIs regionally. Every migration we've seen that skipped pixel planning produced two weeks of "our ROAS collapsed" panic that was purely measurement, not performance. Server-side conversion APIs, fed from Shopify webhooks rather than the browser, are the more durable answer — and they survive ITP, ad blockers and the sandbox.

Measuring checkout conversion without fooling yourself

The benchmark numbers circulating in the SERPs — 45–65% checkout completion, top decile 65–75% — are useful only if you define the denominator the same way. Shopify's own Analytics reports break the funnel into sessions that reached checkout, and orders. That's a different number from "sessions that clicked Pay now."

What we ask clients to instrument:

Completion rate by device, market and payment method

Blended checkout completion hides everything. A drop in mobile Indonesia completion can be entirely masked by strong desktop Australia performance in the same week.

Field-level abandonment

Where in the form do sessions stop? Address block and phone number are the usual suspects in APAC.

Payment authorisation rate versus completion rate

These are different failures. A shopper who presses Pay and gets declined is a PSP/issuer problem, not a UX problem. Domestic acquiring in-market typically lifts authorisation rates for local cards — worth testing if you're routing APAC volume through a European or US acquirer.

Holdout, not before-and-after

Outerwear is seasonal. So is jewellery, so is catering. A pre/post comparison across a season boundary will tell you whatever you want to hear. If you cannot run a true A/B on checkout — and on Shopify's hosted checkout, your options are limited — at minimum compare like-for-like weeks and be explicit that the result is directional.

I'd rather a client say "completion moved 3 points, we think mostly from express payment placement, confidence moderate" than claim a clean 10% they can't defend to a board.

The forward view is that checkout stops being a design problem and becomes a payments-and-logic problem. Shopify keeps shipping platform-level improvements you inherit for free — one-page checkout, accelerated wallets, Functions-based logic — which means the differentiated work moves to the parts Shopify can't localise for you: which payment methods appear in Jakarta versus Taipei, how delivery promises are calculated against in-region inventory, and whether your conversion tracking survives the sandbox. That's the durable lesson from the JOTT Shopify checkout optimization conversion story for anyone running multi-market commerce out of Asia-Pacific: stop customising the form, and start engineering the decisions behind it.

If you're planning a checkout extensibility migration across multiple APAC markets and want a second read on payment architecture and tracking continuity before you commit, talk to the Branch8 commerce team.

Sources

• Shopify.dev — Checkout UI Extensions
• Shopify.dev — Build checkout experiences
• Shopify.dev — Shopify Functions
• Shopify.dev — Web Pixels extensions
• Shopify — Enterprise commerce
• Baymard Institute — Cart Abandonment Rate Statistics
• DataReportal — Global Digital Overview
• J.P. Morgan — Payments insights
• Google, Temasek & Bain — e-Conomy SEA