Schema locale files are JSON files with a `.schema.json` file extension. They host translation strings for various setting schema attributes so that content in the theme editor can be translated to the store's [active language](https://help.shopify.com/manual/online-store/themes/customizing-themes/language/translate-theme#choose-a-language-for-your-theme).

To learn which attributes can be translated, refer to [Content](#content).

## Location

Schema locale files are located in the `locales` directory of the theme:

```text
└── theme
    ...
    ├── config
    └── locales
      ├── en.default.schema.json
      ├── es-ES.schema.json
      ...
```

## Schema

Schema 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">
{
  "my_category": {
    "my_group": {
      "my_description": "translation text",
      ...
    },
    ...
  },
  ...
}
</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.schema.json` |
| Spanish - Spain | `es-ES.schema.json` |
| French - Canada | `fr-CA.schema.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.schema.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.schema.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.schema.json`, which sets the default locale of the theme to English.




### Content

Schema locale files allow you to create translations for the following setting attributes:

<table>
  <thead>
    <tr>
      <th>Parent</th>
      <th>Attribute</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>All settings</td>
      <td>
        <p><code>info</code></p>
        <p><code>label</code></p>
      </td>
    </tr>
    <tr>
      <td>
        <p><code>settings_schema.json</code></p>
        <p><a href="/docs/storefronts/themes/architecture/sections/section-schema">Section schema</a></p>
        <p><code>block</code></p>
      </td>
      <td><code>name</code></td>
    </tr>
    <tr>
      <td><code>select</code></td>
      <td><code>group</code></td>
    </tr>
    <tr>
      <td>
        <p><code>html</code></p>
        <p><code>number</code></p>
        <p><code>text</code></p></p>
        <p><code>textarea</code></p>
        <p><code>video_url</code></p>
      </td>
      <td>
        <p><code>placeholder</code></p>
        
      </td>
    </tr>
    
    <tr>
      <td><code>range</code></td>
      <td><code>unit</code></td>
    </tr>
    <tr>
      <td>
        <p><code>header</code></p>
        <p><code>paragraph</code></p>
      </td>
      <td><code>content</code></td>
    </tr>
    <tr>
      <td><code>presets</code></td>
      <td>
        <p><code>name</code></p>
        <p><code>category</code></p>
      </td>
    </tr>
    <tr>
      <td>
        <p><code>html</code></p>
        <p><code>inline_richtext</code></p>
        <p><code>liquid</code></p>
        <p><code>richtext</code></p>
        <p><code>text</code></p>
        <p><code>textarea</code></p>
        <p><code>url</code></p>
        <p><code>video</code></p>
        <p><code>video_url</code></p>
      </td>
      <td>
        <p><code>default</code></p>
      </td>
    </tr>
  </tbody>
</table>

## Usage

When working with schema locale files, you should familiarize yourself with [referencing schema translations](#reference-schema-translations).

### Reference schema translations

Schema translations can be accessed with code in the the following format:

```
t:translation_category.translation_group.translation_name
```

For example, to make the `name` attribute of the `product.liquid` section translatable, use 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>
</div>

<script data-option="filename" data-value="locales/en.default.schema.json"></script>

<script type="text/plain" data-language="json">
{
  "sections": {
    "product": {
      "name": "Product"
    }
  }
}
</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="sections/product.liquid"></script>

<script type="text/plain" data-language="liquid">

{% schema %}
{
  "name": "t:sections.product.name",
  ...
}
{% endschema %}

</script>

</div>
</p>