Localizing your checkout UI extension
Previously, you created a checkout UI extension that renders some text in the checkout flow with some basic localization.
In this tutorial, you'll learn more about localization and use JavaScript API functions to localize an extension that displays a customer's loyalty point balance. You'll localize the extension text, the number format of the loyalty points balance, and the monetary value of the points. You'll also provide translations for singular and plural values. You can use what you learn here to localize other extensions.

What you'll learn
Anchor link to section titled "What you'll learn"In this tutorial, you'll learn how to do the following tasks:
Define translation data
Localize numbers using a
formatNumber
function similar to the Intl interfaceLocalize currency using a
formatCurrency
Intl interfaceLocalize singular and plural values
Requirements
Anchor link to section titled "Requirements"You've completed the getting started guide.
You've added and published a second language to your development store.
You've activated the language in your development store's primary market.
Sample code
Anchor link to section titled "Sample code"You can copy and paste the following code into your index
file and add a few example values to get the extension to render in the browser.
The rest of the tutorial walks through this sample code step-by-step.
Step 1: Define translations
Anchor link to section titled "Step 1: Define translations"To define translations, you'll adjust the [locale].json
files that come included with the extension source code.
Set the default locale
Anchor link to section titled "Set the default locale"Your default locale specifies which locale Shopify should use when no other appropriate locale can be matched. In this example, English (en
) is already the default locale. However, you can set any locale to be your default locale.
To change your default locale, go to the locales
folder and change the [locale].json
filename to [locale].default.json
.
Add translation strings
Anchor link to section titled "Add translation strings"In this step, you'll add translations for singular and plural values. You'll set translations for counts of one
and other
, but you can specify any pluralization key that Intl.PluralRules.select()
supports and that's appropriate for the locale.
In subsequent steps, you'll define balance
and points
using a placeholder.
In
en.default.json
, add the following code:In the
fr.json
file, add the translated content:
Step 2: Localize the currency
Anchor link to section titled "Step 2: Localize the currency"Now that you've defined translations, you'll learn how to localize currency.
You'll add the formatCurrency
function provided by i18n
. The function wraps the standard Intl interface.
Depending on the current locale, 9.99
will now resolve to the following localized currency formats:
en
:$9.99
fr
:9,99
Step 3: Localize numbers
Anchor link to section titled "Step 3: Localize numbers"In this step, you'll learn how to resolve localized numbers.
You'll localize number formatting using the formatNumber
function provided by i18n
. The function wraps the standard Intl interface.
Depending on the current locale, 10000
will resolve to one of the following localized number formats:
en
:10,000
fr
:10 000
Step 4: Translate the balance remaining message
Anchor link to section titled "Step 4: Translate the balance remaining message"In this step, you'll learn how to translate the balance remaining message using a placeholder.
You'll use a placeholder for formattedBalance
. You'll also call the translate
function, which sends the formattedBalance
variable so that it can be used in the translation string.
Step 5: Translate the loyalty points message with plural values
Anchor link to section titled "Step 5: Translate the loyalty points message with plural values"In this step, you'll learn how to translate the loyaltyPoints
message, which supports pluralization.
You'll use the translate
function to pass in the count
of how many points are available. You'll use formattedPoints
to render the points in the current locale.
The checkout UI extension should now render localized checkout content for en
and fr
:

To test the extension, preview the language from your development store admin.