Storefront Localization Files​

Storefront localization files are JSON files with the .json file extension. These files contain the translation strings for content shown on the storefront throughout the theme. Merchants can access these translations through the SHOPLINE language editor.

Within the theme's layout, templates, snippets, and sections, you can use the Handlebars translation helper (t helper) to reference these translations. This ensures the text is translated according to the store's default language, rather than using hard-coded text strings.

Using the t helper allows you to insert dynamic values.

Location​

Storefront localization files are located in the locales directory of the theme:

└── theme
    ...
    └── locales
      ├── en.json
      ...

Structure​

Storefront localization files must follow a specific naming structure and adhere to a basic organizational hierarchy:

• 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",
      ...
    },
    ...
  },
  ...
}

File Naming​

Localization files must follow the standard IETF language tag naming convention, where the first lowercase code represents the language, followed by .json. For example:

Exceptions for Simplified and Traditional Chinese are:

Content​

To ensure proper translation mapping and simplify the translation process for merchants, the organizational structure for multilingual files should reflect the theme structure.

For instance, the first two tiers of the structure might be as follows:

Usage​

When using store localization files, keep the following in mind:

• Reference Storefront Translations
• Insert Dynamic Values

Reference Storefront Translations​

Using the key and the Handlebars translation helper (t), you can reference translations from the theme file corresponding to the store's current language.

Assuming you have multilingual configuration files for English, French, and Spanish, with each containing the following:

/locales/en.default.json (English):

{
  "products": {
    "product_list": {
      "load_more_tip": "Loading more items"
    }
  }
}

/locales/id.json (Indonesian):

{
  "products": {
    "product_list": {
      "load_more_tip": "Muat lebih banyak proyek"
    }
  }
}

/locales/th.json (Thai):

{
  "products": {
    "product_list": {
      "load_more_tip": "โหลดรายการเพิ่มเติม"
    }
  }
}

To reference this translation, you can use the following:

<span>{{ t 'products.product_list.load_more_tip' }}</span>

The output will be defined by each multilingual file configuration:

// English
<span>Loading more items</span>
// Indonesian
<span>Muat lebih banyak proyek</span>
// Thai
<span>โหลดรายการเพิ่มเติม</span>

Insert Dynamic Values​

Multilingual copy supports interpolation, allowing you to include variables within strings that are dynamically filled when referenced in Handlebars.

For example, you can include the following in a multilingual file:

/locales/en.json:

{
  "blog": {
    "comment": {
      "single_count": "{{count}} comments"
    }
  }
}

When you refer to this translation in your theme, you can set values for the count variables:

/sections/main-article.html:

<h2>
  {{#if article.comments_count == 5}}
    {{t "blog.comment.single_count" count=article.comments_count}}
  {{/if}}
</h2>

Assign values of 5 to count, this code outputs:

<h2>5 comments</h2>