Languages and international

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 (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options › Translation overrides to do this now, whichever platform you're on. Opens in a new tab..

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 (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options › Translation overrides to do this now, whichever platform you're on. Opens in a new tab. and turn on Show translation keys. Or your developer adds this setting to your Core Script:

showTranslations: true,

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    showTranslations: true,
  };
</script>

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 (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options to do this now, whichever platform you're on. Opens in a new tab. and open Translation overrides.
2. Click Add override.
3. Choose your store's language, for example da for a Danish store (see 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 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.

<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.

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

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

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

<!-- 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>

When you add text in the Core Script, check:

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.
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, 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.
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 with the page, a screenshot and your store's language.

SparkLayer forms aren't translated this way: see Translate a form. Product names and options come from your store: see Show translated product data.

Supported languages

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

If you need a language that isn't listed, contact us 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:

/* Modify the below code with the language variable above, e.g. fr*/
language: {{ request.locale.iso_code | json }},
/* End of code */

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    /* Modify the below code with the language variable above, e.g. fr*/
    language: {{ request.locale.iso_code | json }},
    /* End of code */
  };
</script>

Show translated product data (Shopify)

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:

/* Modify the below code with the locale required e.g. en-AU*/
locale: 'en-AU',
/* End of code */

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    /* Modify the below code with the locale required e.g. en-AU*/
    locale: 'en-AU',
    /* End of code */
  };
</script>

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

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