# Languages and international

URL: https://docs.sparklayer.io/help/storefront/languages-and-international

Show SparkLayer in 28 languages, translate Shopify product data, set a locale for date and currency formats, and change any text in the B2B interfaces.

> **Quick summary**
>
> - You can change any text in SparkLayer's [frontend interfaces](https://docs.sparklayer.io/help/storefront/interfaces.md), such as a button label or a heading, without code at **Storefront > Options > Translation overrides** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options > Translation overrides** in the Shopify app. See [Change SparkLayer's text](#change-sparklayers-text).
> - Customers see the interfaces in your store's language automatically, from 28 supported languages. Your developer can set a different language in the [Core Script](https://docs.sparklayer.io/help/storefront/storefront-options.md#add-a-core-script-setting), the SparkLayer code in your theme.
> - Customers see dates and currency symbols in their own browser's regional format, unless you set a fixed locale.
> - Showing translated product data is available on Shopify only, and our team needs to turn it on.

## How it works

Every piece of text customers see in SparkLayer's interfaces has a name, called a key. For example, `pdp.table.price` is the **Price** column heading on product pages. SparkLayer shows the text for each key in the customer's language.

To change the wording, you give a key your own text for a language. This is called a translation override, even when you're only rewording English.

Some strings include variables in curly brackets, such as `{packSize}` or `{price}`, which SparkLayer fills in when it shows the text.

## Change SparkLayer's text

You can change any piece of SparkLayer's text, in any supported language. Most changes need no code: find the key for the text, then add your own wording at **Storefront > Options > Translation overrides** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options > Translation overrides** in the Shopify app.

### Find the key for a piece of text

To find a key, turn on translation keys. Your store then shows each key in place of its text. For example, the product page's **Price** column shows as `pdp.table.price` and the add button as `pdp.add-to-order.text`.

To turn them on without code, go to **Storefront > Options > Translation overrides** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options > Translation overrides** in the Shopify app and turn on **Show translation keys**. Or your developer adds this setting to your Core Script:

```javascript title="Core Script"
showTranslations: true,
```

Signed-in B2B customers see the keys too, so turn this on only briefly, or on an unpublished theme.

### Change text without code

Once you know the key, add your own wording in Storefront options:

1. Go to **Storefront > Options** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/storefront/options)), or **SparkLayer Wholesale > Storefront > Options** in the Shopify app and open **Translation overrides**.
2. Click **Add override**.
3. Choose your store's language, for example `da` for a Danish store (see [supported languages](#supported-languages)), then the key you want to change, for example `pdp.table.price`, and enter your text, such as `Pris`.
4. Click **Save and publish**.

An override only applies to the language you choose. On a Danish store, an override for `en` never shows: use `da`. If your store has several languages, add an override for each one.

See [Storefront options](https://docs.sparklayer.io/help/storefront/storefront-options.md#translation-overrides) for more.

### Change text that contains variables

Some of SparkLayer's text includes variables, such as a pack size or a price. Variables are written in camel case inside curly brackets, for example `{packSize}`. Keep the variable in your new text where you want the value to appear.

For example, `"global.product-settings.pack-size": "This product comes in pack sizes of {packSize}"` shows customers "This product comes in pack sizes of 6".

You can use these keys in Storefront options as well as in the Core Script.

**Keys that contain variables, with their default English text**

```javascript title="Core Script"
<script>
  window.sparkOptions = {
translations: {
  en: {

    // Global
    "global.per-unit": "{price} per unit",
    "global.product-settings.pack-size": "This product comes in pack sizes of {packSize}",
    "min-order-quantity": "Each variant has a minimum order quantity of {minOrderQuantity}",
    "max-order-quantity": "Each variant has a maximum order quantity of {maxOrderQuantity}",
    "min-order-parent-quantity": "This product has a minimum quantity of {minOrderParentQuantity} across all variants",
    "max-order-parent-quantity": "This product has a maximum quantity of {maxOrderParentQuantity} across all variants",

    // Products
    "pdp.setting-info.pack-size": "This product comes in pack sizes of {packSize}",
    "pdp.price.pack-size": "Pack ({packSize}): {price}",
    "pdp.messaging.back-order-due": "Due: {restockDate}",
    "pdp.messaging.stock-qty.low-stock": "Only {qty} available",
    "pdp.messaging.stock-qty.last-stock": "Last {qty} available",
    "pdp.messaging.stock-qty.in-stock": "{qty} available",
    "product-card.price-breaks.cheapest": "From {price} for {qty}+",
    "product-card.price-breaks.saving": "(Save {per}%)",
    "product-card.messaging.back-order-due": "Due: {restockDate}",

    // My Order
    "cart.no-of-order-lines": "{numberOf} {numberOf, plural, =1 {line} other {lines}}",
    "cart.no-of-order-items": "{numberOf} {numberOf, plural, =1 {item} other {items}}",
    "cart.validation-messages.minimum-order-totals": "Your order must be more than {amount} to meet the order requirements.",
    "cart.validation-messages.maximum-order-totals": "Your order must be less than {amount} to meet the order requirements.",
    "cart.validation-messages.minimum-parent-quantity": "Please note, {productName} has a minimum order quantity of {minimum}.",
    "cart.validation-messages.maximum-parent-quantity": "Please note, {productName} has a maximum order quantity of {maximum}.",
    "cart.validation-messages.out-of-stock": "Sorry, {sku} is now unavailable. Please remove this product from your order before checkout",
    "cart.validation-messages.limited-stock-available": "Sorry, we only have {qty} of {sku} available right now, please adjust the quantity in your order before checkout",
    "cart.checkout.confirm-btn.complete": "Complete Order: {total}",
    "cart.checkout.confirm-btn.checkout": "Complete Payment: {total}",
    "cart.checkout.confirm-btn.quote": "Submit Quote: {total}",
    "cart.thanks.payment.blurb": "Your order has now been placed and you will shortly receive email confirmation to {email}. You can check the status of your order at any time by going to 'My Account'.",

    // My Account
    "account.main.my-details.payment-on-account.detail": "Your account balance is {balance} with a credit limit of {creditLimit}.",
    "account.main.my-details.payment-on-account.detail-without-limit": "Your account balance is {balance}.",
  }
},
   },
  };
</script>
```

### Change text in the Core Script (for developers)

Instead of Storefront options, your developer can set text with `translations` in the Core Script.

**Shopify:**

Add this to your theme's `theme.liquid` file, just before the closing `</head>` tag, with the keys and text you want:

```html
<script>
  window.sparkOptions = {
    translations: {
       en: {
         "pdp.table.price": "Price",
       }
    },
  };
</script>
```

On a store in another language, use that language's code. For example, on a Danish store:

```html
<script>
  window.sparkOptions = {
    translations: {
       da: {
         "pdp.table.price": "Pris",
       }
    },
  };
</script>
```

**Other platforms:**

Add the `translations` setting to the [SparkLayer Core Script](https://docs.sparklayer.io/developers/frontend.md) in your website's header, inside the `<head>` tags. On BigCommerce, this is usually in `/templates/layout/base.html`.

Your Core Script is the code you added to your site's header when you installed SparkLayer (see your platform's install guide). It loads SparkLayer with a script tag like this:

```html
<script async src="https://sparkcdn.io/sparkjs/yourstorehere/live"></script>
```

New installs use the latest version. To pin a version or move to the latest, go to **Storefront > Widgets > Core script version** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/frontend/core)), or **SparkLayer Wholesale > Storefront > Widgets > Core script version** in the Shopify app, choose a **Version for this store** and click **Save version**. See [What's new](https://docs.sparklayer.io/help/whats-new.md) for changes in each version.

#### What's in the Core Script

The Core Script tells SparkLayer how to work on your website. A full example:

```html
<!-- SparkLayer Core Script: see the frontend integration guide in the developer docs -->

<script>
  window.sparkOptions = {
    siteId: "examplestore", // your unique site id
    platform: "shopify", // your platform
    rootUrl: {{ routes.root_url | json }},
    language: {{ request.locale.iso_code | json }},
    accountRedirect: {
      urlRegex: /\/account/g,
      goTo: "/index", // page to redirect logged in users to
    },
    display: {
      stock: {
        show: false, // set to true to show stock level display
        max: 50, // highest stock level to show
        last: 5, // last remaining stock
        low: 15, // low stock threshold
        last: true, // set to false to hide last stock message
      },
    },
    auth: {
      user: {{ customer.email | json }},
      token: {{ customer.metafields.sparklayer.authentication | json }},
    },
  };
</script>
<script async src="https://sparkcdn.io/sparkjs/yourstorehere/live"></script>
```

| Setting | What it does |
| --- | --- |
| `siteId` | Your site's unique identifier. See [Account settings](https://docs.sparklayer.io/help/dashboard/account.md). |
| `platform` | Your eCommerce platform. |
| `language` | The language to use. |
| `accountRedirect` | The URL to send signed-in customers to. |
| `display` | Which display settings to turn on. See [Storefront](https://docs.sparklayer.io/help/storefront.md). |
| `auth` | The signed-in customer's authentication details. |

When you add text in the Core Script, check:

- **The language code:** replace `en` with your store's language code (see [supported languages](#supported-languages)).
- **A comma at the end of every line** of text.

## Find and fix untranslated text

If some of SparkLayer's text still shows in English on a store in another language, find each piece and give it your own wording:

1. Turn on translation keys, ideally on an unpublished theme. See [Find the key for a piece of text](#find-the-key-for-a-piece-of-text).
2. Sign in to your store as a B2B customer and go through every screen: product pages, collection pages, the cart and each checkout step, and **My Account**. If you use [sales agents](https://docs.sparklayer.io/help/sales-reps.md), sign in as one and check **My Customers** and the **Order builder** too.
3. Note the key of each piece of text that's still in English.
4. Add an override for each key in your store's language (for example `da`, not `en`). See [Change text without code](#change-text-without-code).
5. Turn translation keys off again.

If a piece of text shows no key, or stays in English after you've added an override in the right language, the translation may be missing on our side. [Contact our support team](https://docs.sparklayer.io/help/support.md) with the page, a screenshot and your store's language.

SparkLayer forms aren't translated this way: see [Translate a form](https://docs.sparklayer.io/help/forms/embedding-and-styling.md#translate-a-form). Product names and options come from your store: see [Show translated product data](#show-translated-product-data-shopify).

## Supported languages

When a customer signs in, they see SparkLayer in your store's language. SparkLayer supports these 28 languages:

| Code | Language |
| --- | --- |
| `en` | English (default) |
| `ar` | Arabic (with full right-to-left support) |
| `zh` | Chinese |
| `hr` | Croatian |
| `cs` | Czech |
| `da` | Danish |
| `nl` | Dutch |
| `fi` | Finnish |
| `fr` | French |
| `de` | German |
| `el` | Greek |
| `he` | Hebrew (with full right-to-left support) |
| `hu` | Hungarian |
| `is` | Icelandic |
| `it` | Italian |
| `ja` | Japanese |
| `lt` | Lithuanian |
| `lv` | Latvian |
| `no` | Norwegian |
| `pl` | Polish |
| `pt` | Portuguese |
| `ro` | Romanian |
| `ru` | Russian |
| `sk` | Slovak |
| `sl` | Slovenian |
| `es` | Spanish |
| `sv` | Swedish |
| `th` | Thai |

If you need a language that isn't listed, [contact us](https://docs.sparklayer.io/help/support.md) and we'll explain how to supply translations.

## Set the storefront language

SparkLayer detects your store's language automatically, so most stores don't need to change anything. On Shopify, the widgets follow the language the customer is browsing your store in (Shopify's locale), not their browser's language: a customer on your French storefront sees SparkLayer in French. This change is for your developer. To use a different language, your developer changes the `language` value in your Core Script to one of the codes above, for example `fr`:

```javascript title="Core Script"
/* Modify the below code with the language variable above, e.g. fr*/
language: {{ request.locale.iso_code | json }},
/* End of code */
```

## Show translated product data (Shopify)

**Shopify only:**

SparkLayer can show customers product data, such as product names and options, in their own language, from your Shopify translations. This is available on Shopify only and isn't on by default: our team turns it on for you. Step 3 is a code change for your developer.

1. In Shopify, add your translations, assign the languages to your Shopify markets and publish the languages.

2. Check your SparkLayer Core Script is version 3.13 or later: see **Version for this store** at **Storefront > Widgets > Core script version** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/frontend/core)), or **SparkLayer Wholesale > Storefront > Widgets > Core script version** in the Shopify app.

3. In your Shopify theme's `theme.liquid`, set the `language` option in the Core Script to:

   ```javascript title="Core Script"
   language: "{{ localization.language.iso_code }}-{{ localization.country.iso_code }}",
   ```

4. [Contact us](https://docs.sparklayer.io/help/support.md) to turn on product translations. Tell us your store and its languages.

Once it's set up, product data in SparkLayer matches the rest of your site, based on the languages you've set up in Shopify and assigned to markets.

If product names still show in your default language, check:

- **The translations are published** in Shopify, not just saved.
- **Each language is assigned to a Shopify market.**
- **Your Core Script is version 3.13 or later.**
- **The `language` setting matches the locale**, as in step 3.

## Set a locale for dates and currency

By default, customers see dates and currency symbols in the locale (regional format) of their own browser, so they match their regional settings. To use the same format for every customer, your developer sets a fixed `locale` in your Core Script:

```javascript title="Core Script"
/* Modify the below code with the locale required e.g. en-AU*/
locale: 'en-AU',
/* End of code */
```

The locale is a language code and a 2-letter country code joined by a hyphen, for example:

| Locale | Formats for |
| --- | --- |
| `'en-GB'` | British English |
| `'en-US'` | American English |
| `'en-AU'` | Australian English |
| `'de-DE'` | German |

When you set a locale, currency prefixes on your B2B prices follow it. For example, with `locale: 'en-US',` a price shown as **US$4.00** shows as **$4.00**. The locale only changes how prices are formatted, not their values.

## FAQs

**Can I support a language that isn't listed?**

[Contact us](https://docs.sparklayer.io/help/support.md) and we'll send details on how to supply translations.

**Why isn't my text change showing?**

Check that you used your store's language code from [supported languages](#supported-languages) (for example `da` on a Danish store, not `en`), that every line ends with a comma, and, if you used Storefront options, that you clicked **Save and publish**. If it still doesn't show, see [Find and fix untranslated text](#find-and-fix-untranslated-text).

**Can I translate a SparkLayer form?**

Yes, by making one copy of the form per language. Forms aren't covered by the Core Script's translations. See [Translate a form](https://docs.sparklayer.io/help/forms/embedding-and-styling.md#translate-a-form).

**Does setting a locale convert prices into another currency?**

No. The locale only changes how prices and dates are formatted. Prices come from the customer's [price list](https://docs.sparklayer.io/help/pricing/managing-pricing.md).