Skip to main content

Localization
API

The API for localizing your extension.

Anchor to standardapiStandardApi

The base API object provided to this and other customer-account extension targets.

Anchor to i18n
i18n
required

Utilities for translating content and formatting values according to the current localization of the user.

Anchor to localization
localization
required

Details about the language of the buyer.

Was this section helpful?

Anchor to useLanguage
useLanguage()

Returns the buyer's language, as supported by the extension. If the buyer's actual language is not supported by the extension, it will return the fallback locale used for translations.

Anchor to useLanguage-returnsReturns

Language

isoCode
string

The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code.

Was this section helpful?

Anchor to useLocalizationCountry
useLocalizationCountry()

Returns the country of the buyer's current session, and automatically re-renders your component if the country changes.

Anchor to useLocalizationCountry-returnsReturns

| undefined
Was this section helpful?

Anchor to useExtensionLanguage
useExtensionLanguage()

Returns the language the buyer sees in the customer account hub.

Anchor to useExtensionLanguage-returnsReturns

Language

isoCode
string

The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code.

Was this section helpful?

Anchor to useI18n
useI18n()

Returns utilities for translating content and formatting values according to the current localization of the user.

Anchor to useI18n-returnsReturns

I18n

formatCurrency
(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string

Returns a localized currency value.

This function behaves like the standard Intl.NumberFormat() with a style of currency applied. It uses the buyer's locale by default.

formatDate
(date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string

Returns a localized date value.

This function behaves like the standard Intl.DateTimeFormatOptions() and uses the buyer's locale by default. Formatting options can be passed in as options.

formatNumber
(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string

Returns a localized number.

This function behaves like the standard Intl.NumberFormat() with a style of decimal applied. It uses the buyer's locale by default.

translate

Returns translated content in the buyer's locale, as supported by the extension.

  • options.count is a special numeric value used in pluralization.
  • The other option keys and values are treated as replacements for interpolation.
  • If the replacements are all primitives, then translate() returns a single string.
  • If replacements contain UI components, then translate() returns an array of elements.
Was this section helpful?

Anchor to useTranslate
useTranslate()

Returns the I18nTranslate interface used to translate strings.

Anchor to useTranslate-returnsReturns

I18nTranslate

Was this section helpful?

Translating strings

/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
reactExtension,
Text,
useTranslate,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
'customer-account.order-status.block.render',
() => <Extension />,
);

function Extension() {
const translate = useTranslate();
return (
<Text>{translate('welcomeMessage')}</Text>
);
}

Anchor to examplesExamples

Anchor to example-getting-the-country-of-the-customerGetting the country of the customer

You can access the current country of a customer to implement country specific logic.

Anchor to example-translating-strings-with-pluralizationTranslating strings with pluralization

You can use the count option in the translate method to get a pluralized string based on the current locale.

Was this section helpful?

Getting the country of the customer

/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
Banner,
reactExtension,
useI18n,
useLocalizationCountry,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
'customer-account.order-index.block.render',
() => <Extension />,
);

function Extension() {
const i18n = useI18n();
const country = useLocalizationCountry();

if (country?.isoCode === 'CA') {
return (
<Banner
status="warning"
title={i18n.translate(
'canadaPostWarningMessage',
)}
/>
);
}

return null;
}