website logo
SupportDashboardAbout SparkLayerSchedule Demo
📘Help Docs
⚙️Tech Docs
Navigate through spaces
⌘K
👋Introduction
How SparkLayer Works
Getting Started
📣Useful Links
What's New!
Roadmap
Support
Try our Demo
Troubleshooting
Policies & Data
🖥️Frontend
⭐Features
⚒️Backend
📊Dashboard
🌐Integrations
Docs powered by
Archbee
Features
Configurations

Languages & International

Supported languages

SparkLayer supports a range of languages and when a customer signs in, they'll see the appropriate language native to your store. SparkLayer currently supports the following languages:

Variable

Language

en

English (default)

ar

Arabic (with full RTL support)

zh

Chinese

cs

Czech

da

Danish

nl

Dutch

fi

Finnish

fr

French

de

German

el

Greek

he

Hebrew (with full RTL support)

hu

Hungarian

it

Italian

no

Norwegian

pt

Portugese

ro

Romanian

ru

Russian

sk

Slovak

es

Spanish

sv

Swedish

By default, SparkLayer automatically detects the default language of your store but it is possible manually overwrite this if required with the modification of the language variable in the SparkLayer Core Script.

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


Need a language not listed above? If you require a language that isn't on our list, please contact us and we can send details on how to supply translations.






Locale configuration

SparkLayer provides an intuitive formatting system for dates and currency symbols by utilising the locale of the user's browser. This ensures dates and currency symbols are displayed according to the user's regional setting, enhancing the user experience.

However, if you prefer to implement a standard formatting across your user base, SparkLayer offers the option to set a specific locale. By adjusting the locale option, you can establish a fixed format for all of your users, irrespective of their individual browser settings.

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


The locale option requires a string input, comprised of a combination of a language code and a two-letter country code, delineated by a hyphen (-).

  • For instance, to set the locale for British English, you would use 'en-GB'
  • For American English, 'en-US'
  • For Australian English, 'en-AU'
  • For German 'de-DE'
  • etc

This format ensures that the chosen locale accurately reflects both the language and the regional conventions for date formatting and currency symbols.

The locale option only affects the formatting of prices, not the values.








Text and language overwrites

SparkLayer uses "language strings" to render the text used in the Frontend Interfaces and any string can be modified with custom text (i.e. overwritten).

If you're wanting to update specific text elements, it's possible to turn on a special setting within the SparkLayer Core Script that exposes specific code snippets that you can then reference with your overwrites.

JS
|
/* Add the below to your SparkLayer Core Script */
showTranslations: true,
/* End of code */


When this setting is enabled, the SparkLayer interface will then render the special language code snippets. In our example below, you can see the language code for the Product Page Interface

Document image


Please note We recommend enabling this setting temporarily or onto a non-published theme to ensure it isn't seen by your logged in B2B customers.

Modifying languages

To overwrite the text, you need to add specific code snippets to the SparkLayer Core Script. In our example video below, we've shown how to temporarily switch on the special showTranslations setting (see above) and adding text overwrites for RRP pricing.

<video class="full-screen-video__media" preload="none" autoplay="" loop="" muted="" playsinline="" webkit-playinginline="">
    <source src="https://www.sparklayer.io/assets/videos/core-script.mp4" type="video/mp4">
</video>


The formatting works by 'cascading' the variables. For example, in the code below, you can see how the pdp.table.price text has been included.

JS
|
/* Add the below code into the SparkLayer Core Script */
translations: {
  en: {
    "pdp.table.price": "Price",
  }
},
/* End of code */


Some important items to note:

  • The variable en must be replaced with the specific language of your store (see our supported languages with their special codes)
  • The text overwrites must always end the line with a comma

Updating text that contains dynamic variables

For some text content, SparkLayer includes dynamic variables, such as pack sizing or special settings.

Document image


Dynamic variables are always wrapped in 'camel case' , for example {packSize} and you can find a list of all dynamic text below:

JS
|
/* Add the below code into the SparkLayer Core Script */
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}.",
  }
},
/* End of code */




Updated 04 Sep 2023
Did this page help you?
PREVIOUS
Customer Pricing
NEXT
Automation & Workflows
Docs powered by
Archbee
TABLE OF CONTENTS
Supported languages
Locale configuration
Text and language overwrites
Modifying languages
Updating text that contains dynamic variables
Docs powered by
Archbee