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:

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.

  1. Click Save changes.
  2. In the side menu, click Site Builder.
  3. In the card for your site, click on Open Site Builder.
  4. Go to the Language Settings section and set switches for the required languages to On.
  5. Go to Store section and select the group of items for which localization is configured.
The product will be added to the site, and when switching the language on the site, the localized names and descriptions of the products will be displayed.

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:
In the HTML section:
Copy
Full screen
Small screen
<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:

Copy
Full screen
Small screen
.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.
Note
Available image formats are JPEG, PNG, GIF, WEBP.
The maximum allowable image size is 10 MB.
    To add multiple languages for localization, duplicate the JavaScript code fragments with the necessary parameter values.
Copy
Full screen
Small screen
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';
 }
  1. 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.
  1. Insert your own code to the block.
Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.

Useful links

Last updated: March 26, 2024

Found a typo or other text error? Select the text and press Ctrl+Enter.

Report a problem
We always review our content. Your feedback helps us improve it.
Provide an email so we can follow up
Thank you for your feedback!