Skip to content
Search Articles/

less than a minute read • Updated 10 minutes ago

Customize the customer portal's language

How to set the customer portal's display language and override individual text strings.

The customer portal’s language is handled separately from the cart, checkout, and receipt, and isn’t managed in the Foxy admin. Instead, you set it directly on the portal element, and can override individual strings if needed.

Set the display language

Add a lang attribute to the foxy-customer-portal element. Supported language codes are: en, es, de, pl, zh-HK, se, nl, fr.

<foxy-customer-portal base="https://YOUR_FOXY_STORE.foxycart.com/s/customer/" lang="fr"></foxy-customer-portal>

Override individual language strings

To change specific wording beyond the defaults, make two changes: add a namespace to the element, then define your replacement strings in JavaScript.

  1. 1

    Add an ns attribute to the foxy-customer-portal element with a value of my-portal customer-portal. (You can use a different name than my-portal — just use it consistently in the next step.)

   <foxy-customer-portal base="https://YOUR_FOXY_STORE.foxycart.com/s/customer/" ns="my-portal customer-portal"></foxy-customer-portal>
  1. 1

    After the I18nElement.onResourceFetch(...) line in your embed script, add a line for each string you want to override:

   I18nElement.i18next.addResource('en', 'my-portal', 'STRING_IDENTIFIER', 'My New String');

  • The first argument (en) is the language code containing the string you’re updating.

  • The second argument (my-portal) matches the namespace you set in the ns attribute.

  • The third argument is the string identifier (see below for how to find it).

  • The fourth argument is your replacement text.

Finding a string identifier

Look up the string in the customer portal translation files on GitHub. Open the language file you’re editing (for example, en.json) and find the string’s nested key path. The identifier is customer-portal followed by each nested key, separated by periods.

For example, to change “Get temporary password” to “Forgot password?”, the string is found here in en.json:

"sign-in-form": {
  "recover_access": "Get temporary password"
}

That makes the identifier customer-portal.sign-in-form.recover_access, so the override line is:

I18nElement.i18next.addResource('en', 'my-portal', 'customer-portal.sign-in-form.recover_access', 'Forgot Password?');

Notes

  • Include a separate addResource line for each string you want to override.

  • Some strings are nested more than one level deep — include every key in the path. For example, the loading spinner’s “Loading” text is customer-portal.sign-in-form.spinner.loading_busy.

Need Help?

Did this article answer your questions? Need help with anything? Please click below to contact us.