> Shopify Plus:
> [Checkout UI extensions](/docs/api/checkout-ui-extensions) that render on the information and shipping and payment steps in checkout are available only to stores on a [Shopify Plus](https://www.shopify.com/plus) plan.




Merchants can expand their business to a global audience by creating shopping experiences in local languages and currencies. You can translate checkout UI extensions into multiple languages for international merchants and customers. Shopify provides a set of JavaScript APIs for accessing translations and provides localized formatting utilities for your checkout UI extension.

## What is localization?

Localization is the process of adapting content to meet the language and cultural requirements of a specific country or region. Shopify localizes checkout UI extensions by resolving customer and shop locales against the extensions's translation data.

The following diagram shows customers in France and Canada that are interacting with a store in Germany. The customers receive localized experiences based on the translation data that's supplied by an app extension.

<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/apps/checkout/what-is-localization-899effe6ddb329c9897d88c9f5b5fa31d56290344f0dcc00e5000b8627504392.png" class="lazyload" alt="Customers in France and Canada interacting with a checkout UI extension that is localized from developer-supplied translation data" width="70%" height="827"></figure>



<div style="text-align: center">
<img src="/assets/apps/checkout/checkout-extensions-localization@2x.png" alt="Ceramic pot product offering listed in English for Canadian customers and in French for customers from France" width="85%">
</div>




## How it works

You supply translation data for your extension's strings in `.json`-formatted locale files, which are stored in the extension's `locales` folder.

```
└── my-app
  └── extensions
        └── my-checkout-ui-extension
            ├── src
            │   └── Checkout.jsx OR Checkout.js // The index page of the checkout UI extension
            ├── locales
            │   ├── en.default.json // The default locale for the checkout UI extension
            │   └── fr.json // The locale file for non-regional French translations
            ├── shopify.extension.toml // The config file for the checkout UI extension
            └── package.json
```


When a customer checks out, the checkout UI extension queries the locale files for a match against locale data and translates the extension UI.

<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/apps/checkout/checkout-localization-resolve-nonregional-7c42735ccb7294c3b504e18880688d97dca3d10abbee474c91833134784b7ebc.png" class="lazyload" alt="The method for determining the translation data to return for a checkout" width="70%" height="1144"></figure>

To choose a translation, Shopify evaluates locale data in the following order of precedence:

1. The customer locale. Example: `de-DE`.

1. The non-regional customer locale. Example: `de`.

1. The shop locale. Example: `fr-FR`.

1. The non-regional shop locale. Example: `fr`.

1. The extension's [default locale](#default-locale).

### Locale files

Locale files are UTF-8-encoded JSON files that contain a set of translations for your UI extension's strings. You can create [non-regional](#non-regional-locale), [regional](#regional-locale), and [default](#default-locale) locales.

Translations consist of key/value pairs. You can supply [singular and plural](#pluralization) translations.

#### Non-regional locale

Use an [IETF BCP 47 language tag](https://en.wikipedia.org/wiki/IETF_language_tag):

<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="Non-regional locale"></script>

<script type="text/plain" data-language="text">
en.json
</script>

</div>
</p>


#### Regional locale

Insert an [`ISO 3166-1 region code`](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) after the language tag:

<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="Regional locale"></script>

<script type="text/plain" data-language="text">
en-CA.json
</script>

</div>
</p>


#### Default locale

Insert `.default` between the locale and the `.json` file extension:

<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="Default locale"></script>

<script type="text/plain" data-language="text">
en-CA.default.json
</script>

</div>
</p>


## Pluralization

The implementation of plural translation keys follows the language plural rules included in the [Common Locale Data Repository](https://unicode-org.github.io/cldr-staging/charts/latest/supplemental/language_plural_rules.html). You can specify any pluralization key that [`Intl.PluralRules.select()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/select) supports and that's appropriate for the locale.

The following are additional details for localizing pluralized content:

- The call to `translate()` must have a single count option.

- Shopify uses `count` to determine a plural key for the given locale.

- The translation must define all possible plural keys for the given locale. For example:

    <p>
    <div class="react-code-block" data-preset="basic">
    <div class="react-code-block-preload ThemeMode-dim">
    <div class="react-code-block-preload-bar basic-codeblock"></div>
    <div class="react-code-block-preload-placeholder-container">
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>
    <div class="react-code-block-preload-code-container">
    <div class="react-code-block-preload-codeline-number"></div>
    <div class="react-code-block-preload-codeline"></div>
    </div>

    </div>
    </div>


    <script type="text/plain" data-language="json" data-title="locales/en.json">
    
    {
      "youHaveMessages": {
        "one": "you have one message",
        "other": "you have {{count}} messages",
      }
    }
    
    </script>
<script type="text/plain" data-language="json" data-title="locales/ar.json">
    
    {
      "youHaveMessages": {
        "zero": "ليس لديك رسائل",
        "one": "لديك رسالة واحدة",
        "two": "لديك رسالتان",
        "few": "رسائل {{count}}  لديك",
        "many": "رسالة {{count}} لديك",
        "other": "رسالة {{count}} لديك",
      }
    }
    
    </script>

    </div>
    </p>


## Limitations

- [Checkout branding](/docs/apps/build/checkout/styling) is available only to [Shopify Plus](https://www.shopify.com/plus) merchants.

- Localization is only supported for checkout UI extensions. Localization for post-purchase extensions isn't supported. Shopify Functions also have [support for localization](/docs/apps/build/functions/localization-practices-shopify-functions).


- Merchants can't override or add translations.

- Complex [pluralization](#pluralization), like for dynamic numeric ranges, isn't supported. For example, you can't localize a phrase that lists a numeric range of items left in stock. This is because the range will change as items are sold, and for some languages, the localizer would need to update the grammar as well.

- Translations can't contain HTML.

- Use our `i18n` functions to localize content. However, if you need to use `Intl` functions for more advanced formatting, only the following are supported:

  - `Intl.NumberFormat`
  - `Intl.DateTimeFormat`
  - `Intl.PluralRules`

    > Note:
    > Some older browsers don't support `Intl`. In these cases, Shopify polyfills a small portion of the object.

## Next steps

- Learn how to [localize a checkout UI extension](/docs/apps/build/checkout/localized-checkout-ui-extensions/localize).