Vitals translations on the storefront
Vitals offers multi-language support for the strings displayed by our apps on the online storefront.
In this article, we will learn how to use the Multi-language module from Vitals.
The critical notes for this page are:
- Default translations
- Multi-language translations
- Translate global app strings.
- Translate dynamic content
Default translations
Vitals offers default translations in 15 languages (list below). This means that all the strings used in the storefront by the Vitals apps are now offered in English, plus 15 other languages.
The strings are professionally translated and proofread in all languages.
Let's take the "Write a Review" string from the Product Reviews app. If your primary language is French, after you install Vitals, your French customers will see "Rédiger un avis." This requires no effort from the Merchant. It will simply work out of the box.
To learn more about primary languages, read:
https://help.shopify.com/en/manual/markets/managing-markets#accessing-markets-for-the-first-time
Note that to determine who are the aforementioned French customers, Vitals uses the locale code provided by Shopify. The most common method to change the locale is by selecting the language from a Language Switcher. This can be done automatically on page load or manually after.
More details here: https://help.shopify.com/en/manual/markets/international-domains/directing-customers/geolocation
Languages with default translations
| Language | Language Code |
| English | en |
| Spanish | es |
| French | fr |
| German | de |
| Italian | it |
| Swedish | sv |
| Dutch | nl |
| Arabic | ar |
| Danish | da |
| Japanese | ja |
| Chinese (simplified) | zh-CN |
| Chinese (traditional) | zh-TW |
| Portuguese | pt-BR |
| Russian | ru |
| Norwegian | no |
| Romanian | ro |
What happens if the current locale doesn't have a translation?
The Primary language translation will be displayed.
The Primary language is the Default language from the Shopify Admin.
For example, the primary language is French, and the current locale is Maltese. Let's further assume there are no translations added in Vitals for Maltese, but there are for French. Our app will try to display the translations from Maltese, and when it doesn't find any, it will look for the French translations.
What happens if the primary language doesn't have translations?
The English version of the strings will be displayed. The app will go down one further level in the funnel
There is a fallback mechanism that works like this:
Multi-language translations
There are two types of strings covered by the Multi-language translation feature. The global strings and the strings generated from the dynamic content, which we internally call appItem strings. We're going to explain what the appItem strings are to bring light on what the global strings are too.
For example, you can create 2 Product Bundles with different titles in Upsell Builder. The title from the completed offer is an AppItem because it is not unique in itself and can have different values depending on the offer. All the other strings that can only appear in a single instance on the storefront are the global strings.
Translate global app strings.
The translation page is accessible from the App Pages, with the link located next to the Tutorial and Help Center links.
It is also accessible from the left sidebar. Look for the Translations menu entry.
From the Translations page, choose the FROM language and TO language from the dropdown selectors at the top.
By default, FROM language will be populated with the primary language of your store.
Note that in this menu, you will find all the languages added to your Shopify admin.
Both published and unpublished languages will be available here. However, the unpublished languages will be displayed on the storefront once you publish them from the Shopify admin. You can still edit them from Vitals in the meantime.
Filter strings
In the quick filter field, input any of the following values to help you with your search:
- field label
- field value from the FROM language
- field value from the TO language
Filter apps
By default, when loading the Multi-language translation page, all the strings from all apps will be listed, with two sorting rules. The first sorting condition prioritizes the Enabled apps on top. A small green visual indicator differentiates between the enabled and disabled apps. Lastly, the apps are listed in alphabetical order.
If you want to narrow down the list of apps shown on the translation page, use the Filter apps dropdown menu. Multiple selections are supported, so if you want the list to contain more than one app, check as many apps from the dropdown as you need.
Note that the filter conditions are saved at the URL level. You can save a filter and share it with your team for easy access.
Translate dynamic content
Once you have created an AppItem, you will notice on the offer page, on the top right side of the screen, the Translate button.
The following AppItems currently support Multi-language translation:
- Upsell Builder offers
- Custom Pre-orders
- Pop-ups
- Announcement Bars
Simply choose the languages you want to translate FROM, in the left dropdown menu, and the language you want to translate TO from the right menu. Go through each string and update it accordingly.
Frequently Asked Questions (FAQ)
I modified a Vitals string on the app page, which was saved in the wrong language. Why?
This can happen when the Default/Primary locale from Shopify doesn't match the language used for the translation.
In the Vitals User Admin, all the strings displayed and saved are stored in the default/primary locale. If your primary locale is EN, but your translations are in ES, when you save a string from the User Admin, you will save it in EN.
You can fix the issue by making sure the primary locale and the Vitals translation language match. You can also bypass or workaround the issue if you use the dedicated translation pages:
- global strings: https://app.vitals.co/bundle/locales/modules
- dynamic content: https://app.vitals.co/bundle/locales/app-items{module-parameters}
Can your Vitals app translate my whole store?
We don't have an app yet that can translate the contents of the whole store. But we are looking into its possibility.