Storefront locale files are JSON files with a `.json` file extension. They host translation strings for content displayed on the storefront throughout the theme. These translations can be accessed by merchants through the [Shopify Language Editor](https://help.shopify.com/manual/online-store/themes/customizing-themes/language/change-wording#overview-of-the-language-editor).
> Note:
> Shopify provides [checkout and system message translations](#checkout-and-system-messages) through the Shopify Language Editor. However, this data is stored by Shopify outside of storefront locale files.
Rather than hard-coded text strings, theme layouts, templates, snippets, and [Liquid assets](/docs/storefronts/themes/architecture#assets) can reference these translations with the Liquid [translation filter](/docs/api/liquid/filters/translate) (`t` filter). This returns the appropriate translated string from the locale file for the [active language](https://help.shopify.com/manual/online-store/themes/customizing-themes/language/translate-theme#choose-a-language-for-your-theme).
When using the `t` filter, you can [interpolate](#interpolation) and [pluralize](#pluralize-translations) translations, as well as [localize any dates and times](#date-and-time-localization).
## Location
Storefront locale files are located in the `locales` directory of the theme:
```text
└── theme
...
├── config
└── locales
├── en.default.json
...
```
## Schema
Storefront locale files need to follow a specific [naming structure](#name-structure). They also follow a basic organizational structure:
- **Category**: The top-level category of your translations.
- **Group**: The second level grouping of translations within a category.
- **Description**: The third level, which represents the individual translations.
<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 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 data-option="filename" data-value="Example"></script>
<script type="text/plain" data-language="json">
RAW_MD_CONTENT{
"my_category": {
"my_group": {
"my_description": "translation text",
...
},
...
},
...
}
END_RAW_MD_CONTENT</script>
</div>
</p>
> Tip:
> When naming translation descriptions, try to be descriptive enough to give the translation context. For example, `blogs.article_comment.submit_button_text` gives more context than `blogs.article_comment.submit`.
### Name structure
Locale file naming must follow the standard [IETF language tag nomenclature](https://en.wikipedia.org/wiki/IETF_language_tag), where the first lowercase letter code represents the language, and the second uppercase letter code represents the region.
For example:
| Language | Format |
| --- | --- | --- |
| English - Great Britain | `en-GB.json` |
| Spanish - Spain | `es-ES.json` |
| French - Canada | `fr-CA.json` |
If a language isn’t region specific, you can use the 2-letter lowercase language representation.
For example:
| Language | Format |
| --- | --- |
| Finnish - All regions | `fi.json` |
Additionally, you must designate a [default locale file](#the-default-locale-file).
#### The default locale file
You must designate a default locale file in the format of `*.default.json`, where `*` is your selected language. This file contains the translations for the default language of the theme. Only one default file is permitted.
Most themes use `en.default.json`, which sets the default locale of the theme to English.
## Content
To ensure that translations are mapped correctly, and to keep the process as simple as possible for merchants, you should organize your key structure to reflect your theme structure.
For example, the first two levels of the structure might look like this:
<table>
<thead>
<tr>
<th>1st level</th>
<th>2nd level</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>general</code></td>
<td>404, breadcrumbs, search (results page and blank slates), pagination</td>
</tr>
<tr>
<td><code>blogs</code></td>
<td>article, article comments, blog sidebar</td>
</tr>
<tr>
<td><code>cart</code></td>
<td>cart contents, updates, notes, link to checkout</td>
</tr>
<tr>
<td><code>collection</code><s/td>
<td>collection, collection loop</td>
</tr>
<tr>
<td><code>products</code></td>
<td>product, product loop, related products</td>
</tr>
<tr>
<td><code>layout</code></td>
<td>general field titles and identifiers</td>
</tr>
<tr>
<td><code>customer</code></td>
<td>account, orders (list and details), account activation, addresses, login, password, registration</td>
</tr>
<tr>
<td><code>contact</code></td>
<td>contact form, form errors</td>
</tr>
<tr>
<td><code>home_page</code></td>
<td>blank slate, featured, help</td>
</tr>
<tr>
<td><code>gift_cards</code></td>
<td>title, usage terms</td>
</tr>
</tbody>
</table>
> Note:
> If you use translations in snippets, then you should group them with the category most related to the snippet's role. For example, if you have a `related-products.liquid` snippet, then any associated translations should be included in the products group.
## Usage
When working with storefront locale files, be aware of the following:
- [referencing storefront translations](#reference-storefront-translations)
- [interpolation](#interpolation)
- [preventing translations from being escaped](#prevent-translations-from-being-escaped)
- [pluralizing translations](#pluralize-translations)
- [date and time localization](#date-and-time-localization)
- [checkout and system messages](#checkout-and-system-messages)
### Reference storefront translations
To reference translations from the storefront locale file for your theme's [active language](https://help.shopify.com/manual/online-store/themes/customizing-themes/language/translate-theme#choose-a-language-for-your-theme), you can use translation keys and the Liquid [translation filter](/docs/api/liquid/filters/translate) (`t` filter).
For example, let's assume you have locale files for English, French, and Spanish. In this case, you might have the following in each associated locale file:
<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 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 data-option="filename" data-value="/locales/en.default.json (English)"></script>
<script type="text/plain" data-language="json">
RAW_MD_CONTENT{
"blog": {
"comment": {
"email": "Your email"
}
}
}
END_RAW_MD_CONTENT</script>
</div>
</p>
<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 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 data-option="filename" data-value="/locales/fr.json (French)"></script>
<script type="text/plain" data-language="json">
RAW_MD_CONTENT{
"blog": {
"comment": {
"email": "Votre adresse courriel"
}
}
}
END_RAW_MD_CONTENT</script>
</div>
</p>
<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 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 data-option="filename" data-value="/locales/es-ES.json (Spanish)"></script>
<script type="text/plain" data-language="json">
RAW_MD_CONTENT{
"blog": {
"comment": {
"email": "Su correo electrónico"
}
}
}
END_RAW_MD_CONTENT</script>
</div>
</p>
To reference this translation, you might use something like the following:
```liquid
<span>{{ 'blog.comment.email' | t }}</span>
```
> Tip:
> When referencing translation keys in Liquid, they must be wrapped in single quotes (`'`).
The output is customized based on the settings in each locale file:
<p>
<div class="react-code-block" data-preset="output">
<div class="react-code-block-preload ">
<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 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="html">
RAW_MD_CONTENT// English
<span>Your email</span>
// French
<span>Votre adresse courriel</span>
// Spanish
<span>Su correo electrónico</span>
END_RAW_MD_CONTENT</script>
</div>
</p>
### Interpolation
Translation strings can be interpolated, meaning you can include variables in your strings to be dynamically populated when the string is referenced in Liquid. For example, you can include following in your locale file:
<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 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 data-option="filename" data-value="/locales/en.default.json"></script>
<script type="text/plain" data-language="json">
RAW_MD_CONTENT
{
"layout": {
"header": {
"hello_user": "Hello {{ name }}!"
}
}
}
END_RAW_MD_CONTENT</script>
</div>
</p>
When you reference that translation in your theme, you can specify a value for the `name` variable:
<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 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 data-option="filename" data-value="/layout/theme.liquid"></script>
<script type="text/plain" data-language="liquid">
RAW_MD_CONTENT
{% if customer %}
<h1>{{ 'layout.header.hello_user' | t: name: customer.first_name }}</h1>
{% endif %}
END_RAW_MD_CONTENT</script>
</div>
</p>
In the case of a customer named "Jane", this code outputs the following:
<p>
<div class="react-code-block" data-preset="output">
<div class="react-code-block-preload ">
<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 type="text/plain" data-language="html">
RAW_MD_CONTENT<h1>Hello Jane!</h1>
END_RAW_MD_CONTENT</script>
</div>
</p>
#### Pass multiple arguments
With interpolation, it's possible to pass multiple arguments, separated by a comma (`,`). For example, if you want to extend the example above to show the customer's first and last name, then you can adjust your translation string and theme reference to the following:
<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 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 data-option="filename" data-value="/locales/en.default.json"></script>
<script type="text/plain" data-language="json">
RAW_MD_CONTENT
{
"layout": {
"header": {
"hello_user": "Hello {{ first_name }} {{ last_name }}!"
}
}
}
END_RAW_MD_CONTENT</script>
</div>
</p>
<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 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 data-option="filename" data-value="/layout/theme.liquid"></script>
<script type="text/plain" data-language="liquid">
RAW_MD_CONTENT
{% if customer %}
<h1>
{{ 'layout.header.hello_user' | t: first_name: customer.first_name, last_name: customer.last_name }}
</h1>
{% endif %}
END_RAW_MD_CONTENT</script>
</div>
</p>
In the case of a customer named "Jane Doe", this code outputs the following:
<p>
<div class="react-code-block" data-preset="output">
<div class="react-code-block-preload ">
<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 type="text/plain" data-language="html">
RAW_MD_CONTENT<h1>Hello Jane Doe!</h1>
END_RAW_MD_CONTENT</script>
</div>
</p>
### Prevent translations from being escaped
Translated content is escaped by default, meaning any HTML character is converted into its entity equivalent.
You can add the suffix `_html` to the description level of your translation key to prevent translated content from being escaped. For example, the content output by the following translation would be escaped, causing the `<strong>` tags to show as plain text:
<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 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 data-option="filename" data-value="/locales/en.default.json"></script>
<script type="text/plain" data-language="json">
RAW_MD_CONTENT{
"layout": {
"header": {
"announcement_bar_text": "Spend $50 and get <strong>FREE</strong> shipping",
}
}
}
END_RAW_MD_CONTENT</script>
</div>
</p>
Adding the `_html` suffix prevents the output content from being escaped, allowing the `<strong>` tags to render as proper HTML:
<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 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 data-option="filename" data-value="/locales/en.default.json"></script>
<script type="text/plain" data-language="json">
RAW_MD_CONTENT{
"layout": {
"header": {
"announcement_bar_text_html": "Spend $50 and get <strong>FREE</strong> shipping",
}
}
}
END_RAW_MD_CONTENT</script>
</div>
</p>
> Tip:
> The `_html` suffix is useful for cases like including HTML characters in translations, or using translations in JavaScript as part of a `<script>` tag or `js.liquid` asset file.
### Pluralize translations
You can apply locale-aware pluralizations to translations by passing a `count` attribute to the [translation filter](/docs/api/liquid/filters/translate) (`t` filter).
The following pluralization keys, defined by the Unicode Consortium's [CLDR](https://github.com/unicode-org/cldr), are supported:
- `few`
- `many`
- `one`
- `other`
- `two`
- `zero`
For example, the following translation and translation reference returns the following output:
<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 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 data-option="filename" data-value="/locales/en.default.json"></script>
<script type="text/plain" data-language="json">
RAW_MD_CONTENT
{
"customers": {
"orders": {
"order_count": {
"one": "You've made {{ count }} order with us",
"other": "You've made {{ count }} orders with us"
}
}
}
}
END_RAW_MD_CONTENT</script>
</div>
</p>
<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 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 data-option="filename" data-value="/layout/theme.liquid"></script>
<script type="text/plain" data-language="liquid">
RAW_MD_CONTENT
{% if customer %}
<h1>{{ 'customers.order.order_count' | t: count: customer.orders_count }}</h1>
{% endif %}
END_RAW_MD_CONTENT</script>
</div>
</p>
<p>
<div class="react-code-block" data-preset="output">
<div class="react-code-block-preload ">
<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 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="html">
RAW_MD_CONTENT// count == 1
<h1>You've made 1 order with us</h1>
// count == 12
<h1>You've made 12 orders with us</h1>
END_RAW_MD_CONTENT</script>
</div>
</p>
For more information about pluralization rules in different languages, refer to the [Unicode language plural rules](https://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html) tables.
### Date and time localization
Dates and times can be rendered with the [date](/docs/api/liquid/filters/date) and [time_tag](/docs/api/liquid/filters/time_tag) Liquid filters. Each has default format options that will display in the appropriate format for the store's [active language](https://help.shopify.com/en/manual/checkout-settings/checkout-language):
- `date` filter [default format options](/docs/api/liquid/filters/date-format)
- `time_tag` filter [default format options](/docs/api/liquid/filters/time_tag-format)
For example, the following Liquid generates the following output:
<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 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="Input"></script>
<script type="text/plain" data-language="liquid">
RAW_MD_CONTENT
{{ order.created_at | date: format: 'abbreviated_date' }}
END_RAW_MD_CONTENT</script>
</div>
</p>
<p>
<div class="react-code-block" data-preset="output">
<div class="react-code-block-preload ">
<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 type="text/plain" data-language="liquid">
RAW_MD_CONTENTDec 31, 2018
END_RAW_MD_CONTENT</script>
</div>
</p>
#### Custom formats
You can include custom formats in locale files by adding a `date_formats` object:
<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 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 data-option="filename" data-value="locales/en.json"></script>
<script type="text/plain" data-language="json">
RAW_MD_CONTENT{
"date_formats": {
"month_and_year": "%B %Y"
}
}
END_RAW_MD_CONTENT</script>
</div>
</p>
These formats must use the same parameters as Ruby's `strftime` method. You can find a list of these parameters in [Ruby's documentation](https://ruby-doc.org/core-3.0.1/Time.html#method-i-strftime), or use a site like [strfti.me](https://www.strfti.me/).
> Caution:
> Ensure that custom formats are included in all locale files. If a custom format is missing in the locale file of the active language, then a Liquid error is rendered.
Using the custom format above, the following Liquid generates the following output:
<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 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="Input"></script>
<script type="text/plain" data-language="liquid">
RAW_MD_CONTENT
{{ order.created_at | date: format: 'month_and_year' }}
END_RAW_MD_CONTENT</script>
</div>
</p>
<p>
<div class="react-code-block" data-preset="output">
<div class="react-code-block-preload ">
<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 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>
<blockquote>
<script type="text/plain" data-language="liquid">
RAW_MD_CONTENTDecember 2018
END_RAW_MD_CONTENT</script>
</blockquote>
</div>
</p>
### Checkout and system messages
Shopify provides checkout and system messages in the following languages:
- Bulgarian (Bulgaria)
- Chinese (Simplified)
- Chinese (Traditional)
- Croatian (Croatia)
- Czech
- Danish
- Dutch
- English
- Finnish
- French
- German
- Greek
- Hindi
- Hungarian
- Indonesian
- Italian
- Japanese
- Korean
- Lithunian (Lithuania)
- Malay
- Norwegian (Bokmål)
- Polish
- Portuguese (Brazil)
- Portuguese (Portugal)
- Romania (Romanian)
- Russian
- Slovak
- Slovenian
- Spanish
- Swedish
- Thai
- Turkish
> Note:
> If you're using a language that's not in the list above, then you'll need to manually enter translations for checkout and system messages through the [Shopify Language Editor](https://help.shopify.com/manual/checkout-settings/checkout-language#create-your-own-checkout-language).