Schema Localization Files
Schema localization files are JSON files with a .schema.json extension. These files store multilingual texts for schema settings, which are automatically replaced when switching the store's language.
Location
Schema localization files are placed in the locales directory of the theme code:
└── theme
...
└── locales
├── en.schema.json
...
Structure
Schema localization files contain the following naming structure, adhering to a basic organizational format:
- Products: The top-level products of translations.
- Product_list: The second-level grouping within the products.
- Load_more_tip: The third level, representing individual
{
"products": {
"product_list": {
"load_more_tip": "custom text",
...
},
...
},
...
}
When naming translation descriptions, provide enough context to make the translation clear.
For example: order.order_details.insuranceService_content_email provides more context than order.order_details.email.
File Naming
Localization files must follow the standard IETF language tag naming conventions, where the first lowercase code indicates the language, ending with .schema.json. For example:
| Language | Schema |
|---|---|
| English | en.schema.json |
| Indonesian | id.schema.json |
| Thai | th.schema.json |
An exception exists for Simplified and Traditional Chinese, which are:
| Language | Schema |
|---|---|
| Simplified Chinese | zh-hans-cn.schema.json |
| Traditional Chinese | zh-hant-tw.schema.json |
Content
Schema localization files allow you to create translations for the following setting attributes:
| Parent | Attribute |
|---|---|
| All settings | info label |
settings_schema.jsonblock Section schema | name |
select | group |
texttextareavideo_url handlebars | placeholder |
range | unit |
presets | namecategory |
Usage
You can access schema translations using the following code format:
t:translation_top_level.translation_second_level.translation_third_level
Using a blog example, we have the following locales/en.schema.json localization file:
{
"sections": {
"blog": {
"name": "Blog"
}
}
}
Below is the section file sections/blog.html:
{{#schema}}
{
"name": "t:sections.blog.name",
...
}
{{/schema}}
Here is a more comprehensive example:
{
"sections": {
"blog": {
"name": "Blog",
"presets": {
"presets__0": {
"category": "Content display",
"name": "Blog"
}
},
"settings": {
"title": {
"label": "Title"
},
"color_scheme": {
"label": "Color",
"info": "Adjust blog color scheme",
"options__0": {
"label": "None"
},
"options__1": {
"label": "Color 1"
}
}
}
}
}
}
{{#schema}}
{
"name": "t:sections.blog.name",
"settings": [
{
"type": "text",
"id": "title",
"label": "t:sections.blog.settings.title.label",
"default": "Blog"
},
{
"type": "select",
"id": "color_scheme",
"label": "t:sections.blog.settings.color_scheme.label",
"default": "none",
"options": [
{
"value": "none",
"label": "t:sections.blog.settings.color_scheme.options__0.label",
},
{
"value": "1",
"label": "t:sections.blog.settings.color_scheme.options__1.label",
}
]
}
],
"presets": [
{
"name": "t:sections.blog.presets.presets__0.name",
"category": "t:sections.blog.presets.presets__0.category"
}
]
}
{{/schema}}
Error loading component.