Localization

You can set up localization for your website and add product descriptions in different languages. This will help you be more customer-centric and increase loyalty to the game. You can perform localization for:

• General site elements.
• Product descriptions on the site.
• Images.

Site Localization

To localize the website interface:

1. Open the project in Publisher Account.
2. Click on Project Settings.
3. In the General Settings window, select the languages ​​you want to localize the site into.
4. In the Project Name field, specify the localized project name in other languages.
5. Click Save.
6. In the side menu, click on Site Builder.
7. In the card of your site, click on Open Site Builder.
8. Go to the Language Settings section and set switches for the required languages to On.
9. Choose where the language selection button will be located. In the Language selector position panel, select Header and/or Footer.

After enabling localization, all elements of the website interface will be translated into the selected languages. By default, text fields and translations prepared by Xsolla are used. To change the default translations, double-click on the text field and enter your own version.

Localization of product names and descriptions

To localize purchases on the site (for example, Virtual Items):

1. Open the project in Publisher Account.
2. Click on Project Settings.
3. In the General Settings window, select the languages ​​you want to localize the site into.
4. In the Project Name field, specify the localized project name in other languages.
5. Click Save.
6. In the side menu, click Store.
7. In the Virtual Items module, click on Configure or Connect.
8. From the drop-down menu, select Create Item or click Edit Item in the context menu of an existing item.
9. Add the Item name and Description to all languages ​​for which you have enabled localization.

10. Click Save changes.
11. In the side menu, click Site Builder.
12. In the card for your site, click on Open Site Builder.
13. Go to the Language Settings section and set switches for the required languages to On.
14. Go to Store section and select the group of items for which localization is configured.

Image localization

You can add an image with text written in a specific language to your website using custom HTML code. You can use a ready-made solution or add your own code.

Example of using an existing solution

1. Open the project in Publisher Account.
2. In the side menu, click Site Builder.
3. In the card for your site, click Open Site Builder.
4. Go to the Language Settings section and set switches for the required languages to On.
5. Add the following content to the Custom Code block:

<div class="image-container">
  <img class="localised-image lazy loaded" data-src="https://cdn.xsolla.net/merchant-bucket-prod/files/uploaded/sitebuilder/71070/bc6d3c723c6381e85fbb929563922ecb.jpg" />
</div>

In the CSS section:

.image-container {
  text-align: center;
  padding: 4em 1em;
}

.image-container img {
  width: 100%;
}

In the JavaScript section:

1. In the htmlLang parameter specify the language for which you are adding the localized image.
2. In the localisedImage.dataset.src parameter, specify the link to the localized image.

To add multiple languages for localization, duplicate the JavaScript code fragments with the necessary parameter values.

const htmlLang = document.documentElement.lang;
const localisedImage = document.querySelector('.localised-image');
 if (htmlLang === 'es') {

   localisedImage.dataset.src = 'https://cdn.xsolla.net/merchant-bucket-prod/files/uploaded/sitebuilder/71070/bc6d3c723c6381e85fbb929563922ecb.jpg';
 }
 if (htmlLang === ‘it’) {

   localisedImage.dataset.src = 'https://cdn.xsolla.net/merchant-bucket-prod/files/uploaded/sitebuilder/71070/bc6d3c723c6381e85fbb929563922ecb.jpg';
 }

6. Click Preview to see the changes. The image will be localized only for the languages you have specified in the Custom Code block.

Adding your own code

1. In the Builder, click Add block and choose Custom code.

2. Insert your own code to the block.