Multilingual & Multi-currency with Webflow Localization

Overview

Localization is essential for delivering a personalized shopping experience for your customers. The following article assumes you have already integrated Foxy into your Website site and have configured Webflow Localization. In this article, we'll accomplish the following:

• Configure Foxy template sets

• Detect language from your website's URL, subdomain, or subdirectory

• Map detected language to a corresponding Foxy template set

• Set website visitors Foxy template set (determines language and currency)

Create Template Sets

Foxy template sets are used to determine what currency, language, and other locale settings will be used when that specific template set is chosen.

1. 1

   Log in to the Foxy admin.

2. 2

   Go to Settings > Templates.

3. 3

   Ensure your Default Template Set is configured for your default/fallback language, currency, and other locale settings.

4. 4

   Click Add template set to create a new template set.

5. 5

   Set the Description (ie: German), Code (ie: german), Language, Locale, and Payment Method Set (for most use cases, choose your Default Payment Method Set).

6. 6

   Repeat for each additional language/currency and take note of the Code values you set for each template set.

Add Localization Snippet

1. 1

   Log in to Webflow.

2. 2

   Go to Project Settings > Custom Code.

3. 3

   Copy/paste the snippet below into your Footer code section:

<script>
// The key is the language string from the URL, and the value is the corresponding template set code
const templateSets = { en: "English", de: "DEFAULT" };

var FC=FC||{},existingOnLoadUpdateTemplateSet="function"==typeof FC.onLoad?FC.onLoad:function(){};function getTemplateSetFromURL(t){const e=t.split("/"),n=e[2].split(".")[0],a=e[3],o=templateSets[n];if(o)return o;const p=templateSets[a];return p||null}function updateTemplateSet(t){(FC.json.template_set||"DEFAULT")!==t&&FC.client.request(`https://${FC.settings.storedomain}/cart?template_set=${t}`)}function updateTemplateSetAccordingToLanguageOnURI(){const t=getTemplateSetFromURL(window.location.href);t&&updateTemplateSet(t)}FC.onLoad=function(){existingOnLoadUpdateTemplateSet(),FC.client.on("ready.done",updateTemplateSetAccordingToLanguageOnURI)};
</script>

Configure Localization Snippet

• For each language/currency, add a key/value pair to this line of the snippet: const templateSets = { en: "English", de: "DEFAULT" };

• The key is the language string in your URL (ie: mydomain.com/de/shop).

• The value is the corresponding Foxy template set code (ie: german)

• For your default language/currency, set the Foxy template set code value as DEFAULT.

Testing

As always, we recommend testing any changes made. Simply go to any of your website urls (ie: mydomain.com/en/shop, mydomain.com/de/show, etc.). Add products to cart. You should see the chosen language/currency in cart.