Vitals translations on the storefront

Vitals offers multi-language support for the strings displayed by our apps on the storefront of the online store.

In this article, we're going to learn how to use the Multi-language module from Vitals. 

The key notes for this page are:

  1. Default translations
  2. Multi-language translations    
    1. Translate global app strings
    2. 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 other 15 languages. 

The strings are professionally translated and proof read in all languages. 

Let's take the "Write a Review" string used by 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:

Note that, in order 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:

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, let's say the primary language is French and the 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 2 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, in Upsell Builder you can create 2 Product Bundles, which can have different titles. The title from the created 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, they 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 found on the top of the page. 

By default, FROM language will be populated with the primary language of your store.

Note that in this menus, you will find all the languages added in your Shopify admin
Both published and unpublished languages will be available here. 

However, the unpublished languages will not be displayed on the storefront, until 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:

  1. field label
  2. field value from the FROM language
  3. 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 to be shown in the translation page, use the Filter apps dropdown menu. Multiple selection is supported, so if you want the list to contain more than 1 app, feel free to check as many apps from the dropdown as you need.

Note that the filter conditions are saved at URL level. This means that you can save a filter and share it with your team, for easy access.

Translate dynamic content

Once you created an AppItem, you will notice in 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


[Q] I modified a Vitals string on the app page and it was saved on the wrong language. Why?
[A] 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: 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.