Skip to main content

Order Status Localization API

The Order Status Localization API provides access to the buyer's locale, currency, time zone, country, and market context on the Order status page. Use this API to read localization details and adapt your extension's content to the buyer's region.

Shopify's i18n translation and formatting helpers aren't available on the Order status page. To translate strings, use extensionLanguage from this API with your own translation files. To format numbers, currencies, and dates, use web-standard APIs like Intl.NumberFormat.

Anchor to Use casesUse cases

  • Format currency values: Read the buyer's currency to correctly format money amounts displayed in your extension.
  • Adapt content by region: Show region-specific content, such as local support contact information, based on the buyer's country and market.
  • Load translations: Determine which translation file to load for your extension based on the best available language match, falling back to your default locale.
Support
Targets (10)

Supported targets

Anchor to PropertiesProperties

The shopify global object provides the buyer's locale, currency, time zone, country, and market context. Access the following properties on shopify to read localization details and adapt your extension's content to the buyer's region.

Anchor to localization
localization
required

The buyer's locale, currency, time zone, country, and market context for the order. Use these values to adapt your extension's content to the buyer's region. For formatted dates, numbers, and translated strings, use the Localization API instead.

Examples

jsx

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default async () => {
render(<Extension />, document.body);
};

function Extension() {
const currency =
shopify.localization.currency.value;
const formatter = new Intl.NumberFormat(
undefined,
{
style: 'currency',
currency: currency.isoCode,
},
);

const sampleAmount = 49.99;

return (
<s-box padding="base">
<s-stack direction="block" gap="small-200">
<s-text type="strong">Order Summary</s-text>
<s-divider />
<s-stack
direction="inline"
gap="base"
justifyContent="space-between"
>
<s-text>Subtotal</s-text>
<s-text>
{formatter.format(sampleAmount)}
</s-text>
</s-stack>
<s-text color="subdued">
Prices shown in {currency.isoCode}
</s-text>
</s-stack>
</s-box>
);
}

Anchor to Best practicesBest practices

  • Use extensionLanguage for translations: The extensionLanguage property returns the language your extension supports, falling back to your default locale if the buyer's language isn't supported. Use this value to load the correct translation file.
Was this page helpful?