Multilingual sites

You can add a Language menu element to any section.

Go to the Style tab to set up the look of your language menu.

Icon type
Choose the way a language should be display.

Shape of flag icon
Choose the shape of icon flags: rectangular, rectangular with rounded edges or round.

Menu type
Select to display languages as a drop-down menu or in one row.

If you choose a drop-down menu, the language of the current page remains visible and other languages are hidden. In the menu, the languages are listed in the same way as they were added in the settings menu. 

Choose the menu Orientation, set up the Icon size (enter a required value or select one of the presets) and Spacing.

Go to the element Settings.

Click Add in the Languages tab.

You can create a multilingual site within one domain or with different domain names.

For example, you have a simple site for your restaurant.

The range of products, their prices and currency don't depend on the customer's location, thus, switching between the languages affects only the language of the content. In this case, it is enough to set up redirections within one site.

For example, users switch from the main page in English site.com/ to the main page in Spanish site.com/es/ or to the main page in French site.com/fr/.

In this case you can specify relative links, that is part of the link after the domain name that is surrounded by slashes, such as /es/contacts/.

The second example is when you have a complex site whose currency and product range depend on the user's location.

In this case, it is recommended to choose the Business pricing plan and create a site for each language you need. For example, site.com for the English version and site.es for the Spanish version of your business.

Then you should use absolute links with the domain name included, such as https://site.com/contacts/to go to the English version of your site.

It's a good practice to use variables in the links when you have a complex site made up of numerous pages, and you want your users to stay on the same page after switching the language. In other words, variables allow the browser to switch between the identical pages in different languages.

NOTE:
For variables to work properly, your page URLs should have the same structure, for example, site.com/menu/ and site.es/menu/.

{uri} variable

This variable come in handy when you have two sites with different domain names, and you want the browser to switch to the page with the same content in another language, such as from site.com/menu/ to site.es/menu/.

In the Link field of the language menu, specify:
site.com/{uri} for your primary site in English;
site.es/{uri} for your translated site in Spanish.

In this case, the browser takes the relative link of the current page (e.g. /menu/desserts on the site.com) and adds it to the domain name of the site the user is switching to (site.es) instead of the {uri} variable.

{clean_uri} variable

This variable comes in handy for multilingual sites within one domain name.

It works in a similar way to the {uri} variable but cuts off the domain name together with the two-character language codes surrounded by forward slashes (/).

That is, the {uri} value of /en/menu/ is equal to the {clean_uri} value of /menu/ (see the table of value examples below).

Here is an example of a multilingual site with language codes used in the site structure:
— main site's pages in English: /, /menu/, /about/
— translated pages in Spanish: /es/, /es/menu/, /es/about/
— translated pages in French: /fr/, /fr/menu/, /fr/about/

In the Link field of the language menu, you should specify:
site.com/{uri} for your primary site in English if you don't use the language code in the URL;
site.com/es/{clean_uri} for your translated site in Spanish;
site.com/fr/{clean_uri} for your translated site in French.

Now, when users switch from your menu page in French (site.com/fr/menu)to the menu page in Spanish (site.com/es/menu), their browser cuts the domain name + two-character language code off the current page URL, gets the /menu/ path, and its adds the URL of your Spanish site version (site.com/es/) specified in the language menu.

Examples of variable values for pages with different URLs:

When using variables, a situation may arise when there is a page on your primary site but there is no such page on the translated site or vice versa. In this case, users will see an error 404 (Page not found).

To prevent this from happening, you can use the fallback parameter. If the link contains the ?fallback=/ parameter, users are automatically redirected to the page specified after the parameter if the twin page in another language is not found.

Example:
The site.com/es/{uri}?fallback=/ link is specified for the Spanish language.

This option is suitable for sites that capture leads from users (landing pages), inform or showcase your business (portfolios).

NOTE
You can set up the site's parameters, such as currency, integrations and systems message, only for the whole site.

1. Create several pages in different languages, for example, English and Spanish versions of you site.

2. Select the page language for each page in the Page settings. This will be the language of system messages: errors, notifications about discounts and promo codes, consents to handle personal data, etc. The selected language will also be displayed first in the Language menu.

3. Add the Language menu to the header of each page.

Optionally:
Turn your site's header into a global section. Changes to a global section are automatically propagated to all its duplicates throughout the site.This way you will need to set up the language menu only once. Otherwise, you will have to add and set up the language menu to every page of the site.

In this case all sites are created on separate domains. Every site has its unique settings of currency, integrations and system messages.

This option is available on the Business plan. The Start and Small Business pricing plans include only one site, the Business plan allows you to create several sites.

1. Create sites in different languages, for example, the English and Spanish versions of your site.

2. In the Settings of each site, select the Language of its content, set up the currency, connect integrations, etc.

3. Add the Language menu element to the header of each page.

Optionally:
Turn your site's header into a global section. Changes to a global section are automatically propagated to all its duplicates throughout the site.This way you will need to set up the language menu only once. Otherwise, you will have to add and set up the language menu to every page of the site.