One of the benefits of being our reseller is being able to use Shoutem builder in your own language by translating the interface and app extensions. In this support article, we will guide you to the translation process – from selecting the language to extension translation.
Translation process
The process and its rules are similar to the rules from our Localization tutorial, however, in this case, you will translate strings that are showing in the builder.
Translation is completed in three parts individually:
The first two steps will need to be configured in the builder area under your Agency Account settings. Log into your account → click the caret icon next to your email address in the upper right corner → choose My Account → Agency → scroll down to Localization settings.
Step 1: Choose a language to which you’d like to translate the interface
From a dropdown menu Select language choose the desired language and save the settings. For the purposes of this support article, we will translate the interface to Spanish.
Step 2: Localize the builder
Under Builder localization settings (everything you see in the Builder via Internet browser on your computer) download the source language file and replace strings in English with either different language or alternative English strings.
Source language file will be downloaded as builder-translation.json. For editing please use any program for text editing but make sure that after you save your changes, program formatting is not applied because otherwise, the builder localization will not work properly.
After you are done translating the file, save it and rename it to the language you want to translate your app to, e.g es.json for Spanish.
Choose + Add translation and upload your translated file.
Step 3: Localize the extensions
Extensions localization settings are referring to extension names & descriptions. Basically, everything displayed in the builder that refers to extensions.
The process is the same as for the Builder localization, however, here you will translate strings from features available in the builder. For example, when you select the Places screen, while adding the content the name of the offered fields will not be in English but in your selected language.
Upload your file and save the changes.
Once you are done, your Localization settings will look like this:
Step 4: Extensions translation
Every extension is a separate Shoutem plugin, treated as its own entity. For that reason, every extension has its own translation file. Extension pages are hosted in the Builder but still belong to extensions.
You can find all Shoutem extensions listed in the Extensions tab – these extensions have their own localization settings as displayed on the following image.
Creating the JSON file with the translation to your language is the same process as before, but has a different upload place.
Some extensions are dependant on each other. For instance, there is a “parent” RSS extension that has “child” extensions (News RSS, Videos RSS, Photos RSS, Podcasts). Child extensions are displaying content that is defined in the parent extensions. That is why to translate the News RSS screen, you need to create translations for the RSS extension.
How to properly translate JSON file strings?
The left side of the JSON file will remain in English because the builder and extensions will use these to read your translation. For example:
We have short examples of how to translate more complex strings with pluralization and variables. After translating the strings to your chosen language, you can validate the JSON for any syntax errors using a free and easy-to-use tool like JSONLint.
Once you’ve translated the extensions, upload their files in Localize tab.
Will I need to repeat this process again in the future?
Not entirely. Steps 2 & 3 from the process are completed only once because those are a global translation of the builder under your Agency account. There are possibilities small modifications will be required in existing translated files only when we add a new feature in the builder, or for some reason make certain adjustments to it. Since your translated JSON file will not be automatically updated, you will be required to maintain it.
For the same reason, we added three additional options for uploaded files, one of them is Download option which will make the maintenance process a lot easier and save time.
Regarding Step 4 from the process, each app has its own set of Extensions, so you will need to keep uploading already translated files if it is being required in newly created apps.
Do I need to upload my Extension translation files in each created app?
Yes, but this applies only to Extensions translation (Step 4). We advise you to store your translated JSON files safely on your computer or Drive because you will use them often. It all depends on how many apps you have on your Agency account.
