Shopify Plus Checkout Extensibility APAC Localisation: A Step-by-Step Guide

Expanding a Shopify Plus store across Asia-Pacific means confronting a region where checkout expectations vary wildly between markets. Shopify Plus checkout extensibility for APAC localisation is the mechanism that lets you adapt payment methods, address formats, tax logic, and UI copy to each market—without forking your theme or maintaining fragile checkout.liquid overrides.

Related reading: Adobe Commerce vs Shopify Plus B2B Asia Pacific: A Hands-On Comparison

Related reading: Personalisation Engine Implementation for APAC Marketplaces

Related reading: Retail Data Stack Audit Checklist APAC 2026: 10 Critical Layers

Related reading: GPU vs LLM API Cost Benchmarking Analysis for APAC Operations

Related reading: Claude AI Integration Business Workflows: A Practical APAC Guide

Since August 2024, Shopify has enforced checkout extensibility as the only path for Plus merchants to customise checkout. The legacy checkout.liquid approach is fully deprecated. According to Shopify's own migration documentation, all Plus stores must use Checkout UI Extensions, Shopify Functions, and the Branding API going forward. This matters especially in APAC, where localisation requirements are more granular than most Western merchants anticipate.

This tutorial walks through the specific implementation steps Branch8 uses to deploy Shopify Plus stores across Hong Kong, Singapore, Taiwan, Vietnam, Malaysia, Indonesia, the Philippines, and Australia.

What Does Checkout Extensibility Actually Replace?

Before diving into implementation, it helps to understand the architecture. Checkout extensibility replaces the old checkout.liquid template with three distinct layers:

Checkout UI Extensions

These are React-based components (using Shopify's UI Extensions API) that render inside the checkout. They run in a sandboxed Web Worker, meaning you cannot inject arbitrary JavaScript or load third-party scripts directly. You build them with @shopify/ui-extensions-react/checkout.

Shopify Functions

These are server-side logic units compiled to WebAssembly (Wasm) that run on Shopify's infrastructure. They handle delivery customisation, payment customisation, discounts, and cart/checkout validation. Execution time is capped at 5ms, according to Shopify's Functions documentation.

Checkout Branding API

This GraphQL API controls visual theming—colours, typography, corner radii, header/footer content—without writing extension code.

For APAC localisation, you'll use all three layers. UI Extensions handle localised form fields and messaging. Functions handle payment method filtering and tax logic. The Branding API handles market-specific visual identity.

How Do You Set Up Your Development Environment for APAC Markets?

Before writing any code, you need the right scaffolding.

Prerequisites

• Shopify Plus plan (checkout extensibility is Plus-only)
• Shopify CLI 3.x installed (npm install -g @shopify/cli@latest)
• Node.js 18+ and npm/yarn
• A development store with Shopify Markets enabled
• Partner account with app development permissions

Step 1: Create a Checkout Extension App

1shopify app init
2cd your-app-name
3shopify app generate extension --type checkout_ui_extension
4shopify app generate extension --type payment_customization
5shopify app generate extension --type delivery_customization

This scaffolds three extensions inside a single app. Each gets its own directory under extensions/.

Step 2: Configure Shopify Markets

In your Shopify admin, navigate to Settings → Markets and create separate markets for each APAC region. At minimum, you'll want:

• Hong Kong (HKD, Traditional Chinese + English)
• Singapore (SGD, English + Simplified Chinese)
• Taiwan (TWD, Traditional Chinese)
• Malaysia (MYR, Malay + English)
• Indonesia (IDR, Bahasa Indonesia)
• Philippines (PHP, English + Filipino)
• Vietnam (VND, Vietnamese)
• Australia (AUD, English)

Each market gets its own currency, language, and domain (subfolders or subdomains). This is the foundation that checkout extensibility hooks into.

How Do You Add Local APAC Payment Methods?

This is where most merchants stumble. According to a 2024 Worldpay Global Payments Report, digital wallets account for 69% of e-commerce transaction value in Asia-Pacific—far above the global average of 49%. You cannot ignore GrabPay, GoPay, FPX, PayNow, or local bank transfers.

Step 3: Integrate Payment Gateways

Shopify Plus supports local payment methods through two paths:

• Shopify Payments with local methods (available in Singapore, Hong Kong, Australia, and Japan natively)
• Third-party payment apps like Adyen, Stripe, or 2C2C for markets where Shopify Payments doesn't operate

For markets like Indonesia (GoPay, OVO, Dana), Vietnam (MoMo, ZaloPay), and Malaysia (FPX, Boost, Touch 'n Go), you'll typically use Adyen or a regional aggregator. Install the payment app, then use a Payment Customization Function to control which methods appear per market.

Step 4: Build a Payment Customization Function

Create a Shopify Function that hides or reorders payment methods based on the buyer's market:

1// src/main.rs (Rust, compiled to Wasm)
2use shopify_function::prelude::*;
3use shopify_function::Result;
4
5#[shopify_function_target(rename = "run", query_path = "src/run.graphql")]
6fn run(input: input::ResponseData) -> Result<output::FunctionRunResult> {
7    let buyer_country = input
8        .localization
9        .country
10        .as_ref()
11        .map(|c| c.iso_code.as_str())
12        .unwrap_or("US");
13
14    let mut operations = vec![];
15
16    for method in &input.payment_methods {
17        let method_name = method.name.to_lowercase();
18
19        // Hide GrabPay outside SG and MY
20        if method_name.contains("grabpay")
21            && buyer_country != "SG"
22            && buyer_country != "MY"
23        {
24            operations.push(output::HideOperation {
25                payment_method_id: method.id.clone(),
26            });
27        }
28
29        // Hide FPX outside Malaysia
30        if method_name.contains("fpx") && buyer_country != "MY" {
31            operations.push(output::HideOperation {
32                payment_method_id: method.id.clone(),
33            });
34        }
35
36        // Hide PayNow outside Singapore
37        if method_name.contains("paynow") && buyer_country != "SG" {
38            operations.push(output::HideOperation {
39                payment_method_id: method.id.clone(),
40            });
41        }
42    }
43
44    Ok(output::FunctionRunResult {
45        operations,
46    })
47}

The corresponding GraphQL query (src/run.graphql) fetches localisation and payment method data:

1query RunInput {
2  localization {
3    country {
4      isoCode
5    }
6  }
7  paymentMethods {
8    id
9    name
10  }
11}

Deploy with shopify app deploy, then activate the function in Settings → Payments → Payment customizations in the Shopify admin.

How Do You Handle APAC Address Formats?

APAC address formats diverge significantly from the Western street-city-state-zip pattern. In Taiwan, addresses are written province → city → district → road → number. In Japan, it's prefecture → city → ward. In Indonesia, RT/RW neighbourhood codes matter for last-mile delivery.

Shopify's default address form handles some of this automatically through its country-specific address formatting. But for several markets, you'll need a Checkout UI Extension to add fields or restructure the form.

Step 5: Build an Address Customisation UI Extension

1// extensions/address-localisation/src/Checkout.jsx
2import {
3  reactExtension,
4  useShippingAddress,
5  useApplyShippingAddressChange,
6  TextField,
7  BlockStack,
8  useLocalizationCountry,
9} from '@shopify/ui-extensions-react/checkout';
10
11export default reactExtension(
12  'purchase.checkout.shipping-option-list.render-before',
13  () => <AddressExtension />
14);
15
16function AddressExtension() {
17  const address = useShippingAddress();
18  const applyChange = useApplyShippingAddressChange();
19  const country = useLocalizationCountry();
20
21  // Only render for Taiwan
22  if (country?.isoCode !== 'TW') return null;
23
24  return (
25    <BlockStack spacing="base">
26      <TextField
27        label="區 (District)"
28        value={address?.address2 || ''}
29        onChange={(value) =>
30          applyChange({
31            type: 'updateShippingAddress',
32            address: { address2: value },
33          })
34        }
35      />
36      <TextField
37        label="路/街 (Road/Street)"
38        value={address?.address1 || ''}
39        onChange={(value) =>
40          applyChange({
41            type: 'updateShippingAddress',
42            address: { address1: value },
43          })
44        }
45      />
46    </BlockStack>
47  );
48}

This extension renders additional fields specifically for Taiwanese buyers. The purchase.checkout.shipping-option-list.render-before target places it in the shipping section. You can use similar conditional logic for Indonesian RT/RW fields or Vietnamese ward/commune selectors.

Update your extension's shopify.extension.toml to declare the target:

1[[extensions.targeting]]
2module = "./src/Checkout.jsx"
3target = "purchase.checkout.shipping-option-list.render-before"

How Do You Implement APAC Tax and Duty Logic?

Tax handling varies enormously across the region. Australia applies a 10% GST with a low-value imported goods threshold (AUD 1,000, per the Australian Taxation Office). Singapore charges 9% GST on imported goods as of January 2024, according to the Inland Revenue Authority of Singapore. Taiwan has a 5% VAT. Indonesia applies up to 11% PPN (VAT equivalent).

Shopify Markets handles basic tax rates per country. But for duty calculation on cross-border shipments—common when fulfilling from a Hong Kong warehouse to Southeast Asian markets—you'll need additional logic.

Step 6: Configure Tax Settings Per Market

In Settings → Markets → [Market] → Duties and import taxes, choose between:

• DDP (Delivered Duty Paid): You collect duties at checkout. Better conversion rate but requires accurate HS code classification.
• DAP (Delivered At Place): Buyer pays duties on arrival. Simpler but causes cart abandonment—a 2023 study by Zonos found that 54% of international shoppers abandon carts when unexpected fees appear at delivery.

For most APAC deployments, Branch8 recommends DDP for high-value markets (Australia, Singapore) and DAP for price-sensitive markets (Vietnam, Philippines, Indonesia) where duty thresholds are low and product values are modest.

Step 7: Add a Cart Validation Function for Tax Compliance

Some APAC markets restrict specific product categories. For example, certain health supplements require import permits in Singapore, and some electronics face additional duties in Indonesia. A Cart/Checkout Validation Function can block restricted items:

1#[shopify_function_target(rename = "run", query_path = "src/run.graphql")]
2fn run(input: input::ResponseData) -> Result<output::FunctionRunResult> {
3    let buyer_country = input
4        .localization
5        .country
6        .as_ref()
7        .map(|c| c.iso_code.as_str())
8        .unwrap_or("US");
9
10    let mut errors = vec![];
11
12    for line in &input.cart.lines {
13        if let Some(product) = &line.merchandise.product {
14            let tags: Vec<&str> = product.tags.iter().map(|t| t.as_str()).collect();
15
16            // Block restricted supplements in SG
17            if buyer_country == "SG" && tags.contains(&"restricted-supplement") {
18                errors.push(output::FunctionError {
19                    localized_message: "This product cannot be shipped to Singapore due to import restrictions.".to_string(),
20                    target: "cart".to_string(),
21                });
22            }
23        }
24    }
25
26    Ok(output::FunctionRunResult { errors })
27}

How Do You Localise Checkout Copy and Branding?

Checkout extensibility supports localisation through two mechanisms: Shopify's built-in translation system and the Checkout Branding API.

Step 8: Add Translations to Your Extensions

In each extension directory, create locale files:

1extensions/address-localisation/locales/
2  en.default.json
3  zh-TW.json
4  zh-CN.json
5  vi.json
6  ms.json
7  id.json

Example zh-TW.json:

1{
2  "district_label": "區",
3  "road_label": "路/街",
4  "shipping_note": "台灣本島配送約 1-3 個工作天"
5}

Reference these in your extension with the useTranslate hook:

1import { useTranslate } from '@shopify/ui-extensions-react/checkout';
2
3function AddressExtension() {
4  const translate = useTranslate();
5  return (
6    <TextField label={translate('district_label')} />
7  );
8}

Step 9: Apply Market-Specific Branding

Use the Checkout Branding API to adjust colours and typography per market. This is particularly relevant if you're operating separate brands or sub-brands across APAC (common for companies that use a Westernised brand in Australia but a localised brand in Southeast Asia).

1mutation checkoutBrandingUpsert($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) {
2  checkoutBrandingUpsert(
3    checkoutBrandingInput: $checkoutBrandingInput
4    checkoutProfileId: $checkoutProfileId
5  ) {
6    checkoutBranding {
7      customizations {
8        global {
9          cornerRadius
10          typography {
11            primary { shopifyFontGroup { name } }
12          }
13        }
14      }
15    }
16    userErrors { field message }
17  }
18}

You can create multiple checkout profiles and assign them to different markets, though this currently requires Shopify Plus support to enable per-market profile assignment.

What Did a Real Multi-Market APAC Deployment Look Like?

In Q1 2024, Branch8 completed a Shopify Plus checkout extensibility migration for a Hong Kong-based fashion retailer selling into Singapore, Taiwan, Malaysia, and Australia. The brand had been running checkout.liquid customisations for three years—including hardcoded GrabPay toggles and a jQuery-based address reformatter for Taiwan.

We migrated to checkout extensibility over eight weeks using Shopify CLI 3.50, building four Shopify Functions (payment customisation for GrabPay/FPX visibility, delivery customisation for Taiwan convenience store pickup, cart validation for Australian GST thresholds, and a discount function for market-specific promotions) and two UI Extensions (address localisation for Taiwan and a trust badge component showing local payment logos).

The result: checkout completion rate improved by 11% in Taiwan and 8% in Malaysia within the first 60 days. The Taiwan improvement came almost entirely from the localised address fields—buyers stopped entering addresses in the wrong field order. The Malaysia improvement correlated with FPX being surfaced prominently for Malaysian IP addresses instead of buried beneath international card options.

The trade-off was development complexity. The sandboxed environment of UI Extensions means you cannot use arbitrary npm packages. We had to rebuild a convenience store pickup selector from scratch using only Shopify's UI component library (ChoiceList, BlockStack, InlineStack). That alone took two weeks of the eight-week timeline.

How Do You Test Across APAC Markets Before Going Live?

Testing Shopify Plus checkout extensibility across markets requires simulating different buyer contexts.

Step 10: Use Shopify's Development Store With Market Simulation

• Set your browser language to match the target market (e.g., zh-TW for Taiwan)
• Use the ?country=MY URL parameter to simulate Malaysian market context
• Test payment method visibility by placing test orders through each market's checkout
• Verify Functions execute correctly by checking the Functions → Logs section in your Partner dashboard

Step 11: Deploy Incrementally

Roll out to one market at a time. Start with your highest-volume APAC market (typically Australia or Singapore for Western brands, Hong Kong or Taiwan for Greater China brands). Monitor checkout analytics in Shopify admin under Analytics → Checkout funnel for at least two weeks before expanding.

Common Pitfalls in APAC Checkout Localisation

Currency Formatting

VND and IDR involve large numbers (a $50 USD product is roughly 1,250,000 VND). Ensure your UI Extensions don't truncate these values. Shopify handles this in its native price display, but any custom price rendering in extensions needs explicit formatting.

Language Fallbacks

If you don't provide a vi.json locale file, Vietnamese buyers see English. According to Common Sense Advisory research, 76% of online shoppers prefer to buy products with information in their native language. Missing translations directly impact conversion.

Function Execution Limits

Shopify Functions must execute within 5ms and consume no more than 11MB of memory (per Shopify's documentation). Complex tax lookup tables or large product restriction lists can exceed these limits. Pre-filter data using metafields rather than embedding lookup tables in the Function code.

Payment Method Availability

GrabPay through Shopify Payments is only available in Singapore and Malaysia. For other markets, verify your third-party payment provider supports the specific local method before building customisation logic around it.

Bringing It All Together

Implementing Shopify Plus checkout extensibility for APAC localisation is not a weekend project, but it's significantly more maintainable than the checkout.liquid approach it replaces. The architecture—UI Extensions for presentation, Functions for logic, Branding API for visual identity—maps cleanly onto the market-by-market requirements that define APAC commerce.

Start with payment method customisation (highest conversion impact), then address formatting (highest support ticket reduction), then branding and copy localisation (highest brand consistency gain). Test per-market, deploy incrementally, and monitor checkout funnel metrics per market rather than in aggregate.

The region's payment landscape continues to evolve. Real-time payment networks like Singapore's PayNow and Malaysia's DuitNow are growing rapidly—according to ACI Worldwide's 2024 Prime Time for Real-Time report, real-time payments in Asia-Pacific grew 15.6% year-over-year. Building on checkout extensibility means you can add new payment methods and market logic without re-architecting your checkout each time.

Need help implementing Shopify Plus checkout extensibility across your APAC markets? Branch8 has delivered multi-market Shopify deployments from Hong Kong to Australia. Talk to our e-commerce engineering team about your localisation requirements.

Sources

• Shopify Checkout Extensibility Documentation: https://shopify.dev/docs/api/checkout-ui-extensions
• Shopify Functions Overview: https://shopify.dev/docs/apps/build/functions
• Worldpay Global Payments Report 2024: https://www.fisglobal.com/en/global-payments-report
• Zonos International Shopping Survey 2023: https://zonos.com/resources
• Inland Revenue Authority of Singapore GST Rate Change: https://www.iras.gov.sg/taxes/goods-services-tax-(gst)/gst-rate-change
• Australian Taxation Office Low Value Imported Goods: https://www.ato.gov.au/businesses-and-organisations/gst-excise-and-indirect-taxes/gst/in-detail/rules-for-specific-transactions/international-transactions/gst-on-low-value-imported-goods
• ACI Worldwide Prime Time for Real-Time 2024: https://www.aciworldwide.com/real-time-payments-report
• Common Sense Advisory "Can't Read Won't Buy" Research: https://csa-research.com/Featured-Content/For-Global-Businesses/Cant-Read-Wont-Buy