---
title: "Fetching language packs"

doc_type: static
doc_category: static
doc_version: v20270301
source_url:
  html: 'https://developer.shopline.com/docs/online-store-3-0-themes/best-practice/fetching-language-packs'
  md: 'https://developer.shopline.com/docs/online-store-3-0-themes/best-practice/fetching-language-packs.md'
---
# Fetching language packs

A language pack is a translation file used to adapt storefront content for different regional languages. Stored in JSON format, this file contains localized translation strings tailored to a specific locale.

The [Bottle](https://developer.shopline.com/docs/online-store-3-0-themes/bottle.md) theme exposes localization-related methods within the `window.Shopline` global object. These methods are used to initialize language packs and retrieve localized translation strings. This article introduces how to invoke these methods to access localization data.

***

## Fetching the theme language pack for the current locale

### window\.Shopline.i18nInit

This method initializes and loads the theme's language pack for the current locale. Calling this method triggers an asynchronous request to fetch the language pack from the remote server.

#### Method signature

`i18nInit(): Promise<any>`

#### Parameters

None.

#### Returns

`Promise<any>`: A `Promise` object that resolves to a JSON object containing the localized key-value pairs for the current language.

#### Example

The following sample code demonstrates how to fetch the theme language pack for the current locale:

```javascript
const themeI18nData = await window.Shopline.i18nInit();

console.log(themeI18nData) // Prints data in the language pack
```

### window\.Shopline.t

After the theme's language pack for the current locale has been initialized and loaded, you can call this method to retrieve the translation string associated with a specific key.

#### Method signature

`t(path: string, hash?: Record<string, any>) => string`

#### Parameters

| **Parameter** | **Type**             | **Required** | **Description**                                                                                                                                                                                                                                    |
| ------------- | -------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| path          | string               | Yes          | The translation key. For more information about the naming conventions of translation keys, refer to [Multilingual key naming convention](https://developer.shopline.com/docs/online-store-3-0-themes/theme-structure/i-18-n.md#oZbFS).               |
| hash          | Record\<string, any> | No           | An object for variable interpolation, allowing you to dynamically insert values. For more information about the usage, refer to [Interpolate variables](https://developer.shopline.com/docs/online-store-3-0-themes/theme-structure/i-18-n.md#fhAnn). |

#### Returns

`string`: The localized translation string

#### Example

On the search page of the Bottle theme, the structure of the English JSON file used to display the number of search results is as follows:

```json
// i18n/en.json

{
  "search": {
    "count_results": "{{count}} Results"
  }
}
```

In this example, the variable `count` is interpolated into `{{count}} Results`. You can retrieve the English translation string for the `search.count_results` key using the following code:

```javascript
let totalCount = 10;

let countText = window.Shopline.t("search.count_results", { count: totalCount });

console.log(countText) // Outputs "10 Results"
```

***

## Fetching app-specific language packs

[Theme app extensions](https://developer.shopline.com/docs/online-store-3-0-themes/integrate-apps-with-themes/theme-app-extension/overview.md) allow developers to upload app-specific localization files. To retrieve the content of these files, you can invoke the methods in the following sections.

### window\.Shopline.extension.i18nInit

This method initializes and loads the app's language pack for the current locale. Invoking this method triggers an asynchronous request to fetch the language pack from the remote server.

#### Method signature

`i18nInit(extensionUuid: string): Promise<any>`

#### Parameters

| **Parameter** | **Type** | **Required** | **Description**                    |
| ------------- | -------- | ------------ | ---------------------------------- |
| extensionUuid | string   | Yes          | The unique identifier for the app. |

#### Returns

`Promise<any>`: A `Promise` object that resolves to a JSON object containing the localized key-value pairs for the current language.

#### Example

The following sample code demonstrates how to fetch the app's language pack for the current locale:

```javascript
const extensionI18nData = await window.Shopline.extension.i18nInit("xxxxxx");

console.log(extensionI18nData) // Prints data in the language pack
```

### window\.Shopline.extension.t

After the app's language pack for the current locale has been initialized and loaded, you can call this method to retrieve the translation string associated with a specific key.

#### Method signature

`t(extensionUuid: string, path: string, hash?: Record<string, any>) => string`

#### Parameters

| **Parameter** | **Type**             | **Required** | **Description**                                                                                                                                                                                                                                    |
| ------------- | -------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| extensionUuid | string               | Yes          | The unique identifier for the app.                                                                                                                                                                                                                 |
| path          | string               | Yes          | The translation key. For more information about the naming conventions of translation keys, refer to [Multilingual key naming convention](https://developer.shopline.com/docs/online-store-3-0-themes/theme-structure/i-18-n.md#oZbFS).               |
| hash          | Record\<string, any> | No           | An object for variable interpolation, allowing you to dynamically insert values. For more information about the usage, refer to [Interpolate variables](https://developer.shopline.com/docs/online-store-3-0-themes/theme-structure/i-18-n.md#fhAnn). |

#### Returns

`string`: The localized translation string

#### Example

In a specific app's product list, the structure of the English JSON file used to display the price is as follows:

```json
// en.json

{
  "product_list": {
    "from": "From {{price}}"
  }
}
```

In this example, the variable `price` is interpolated into `From {{price}}`. You can retrieve the localized translation string for the `product_list.from` key using the following code:

```javascript
let money = 10;

let priceText = window.Shopline.extension.t("xxxxxx", "product_list.from", { price: money });

console.log(priceText) // Outputs "From 10"
```