Custom translations

Custom translations play a pivotal role in enhancing user experiences by allowing you to translate content that is not defined as transletable, whether the content is coming from another third-party app or you have custom/hard-coded content in your store.

Our custom translation feature will allow you to translate such content, as long as it's static (does not dynamically change after the page loads or when a user clicks somewhere) and loads before our script for custom translations.

The custom translation feature will allow you to localize content and ensure that users can easily understand and engage with the app or service in their preferred language. This approach fosters a sense of inclusivity and builds trust, as users feel more connected to the content, leading to increased user satisfaction. Moreover, custom translations enable businesses to expand their global reach, tapping into new markets and unlocking growth opportunities.

In this article we will learn to:

We are going to use this page.

With our first example, we are going to manually add the text contents of a Custom Liquid section for Custom Translation.

The first step would be to open Translation Lab, navigate to the Translations page and choose Custom Translations:

First, in order for the custom translations we create to be able to load in our store, we have to enable the Custom Translations app embed.

This can be done either by manually going to:

Online Store -> Themes -> Customize -> App Embeds

or press the shortcut button Configure available in the Custom Translations tab:

then toggle the Custom Translations app embed and Save:

Once that is done, you should see that our app embed is Enabled and you are ready to begin!

If you have not created any custom translations yet, the page will be empty and you have to start by creating your section first by pressing Add new section button:

The name of the section is entirely for your convenience, it's not included in the translation process, you can type anything that would help you differentiate your custom translations in the future.

By now we should have successfully created our section, then we have to proceed by pressing Add content:

That action will create a new row, in the left column we have to put an exact match of the text you are looking to translate, and on the right - our translation.

You can right-click on your page and copy the text from your page:

Simply left-click on the text in the left box and paste your copied text.

Once you add an exact match of your text, you can also auto-translate by using the button in the middle of your AI Translate is toggled for the language you are making the custom translation for.

The end result should be like this:

When you are dealing with a formatted text and you want to custom translate it, you would not be able to simply select it from the page and paste it.

A more advanced approach is required, you would have to use Chrome's inspection tool by pressing (F12) or right-click with your mouse and then press Inspect:

Once we have our DevTools (Chrome inspector) open, we can then click on the arrow icon, you would be able to proceed with your mouse and select over a text, and then you can see the structure that would serve you as a guide on what would be the proper resources to copy in order to add them for custom translation.

With our example, we can actually see that even though the text seems to be a whole sentence on the visual part of the site (front-end), in the structure things are actually different.

In that particular case, in order for us to successfully translate this whole paragraph, we would have to add a separate custom translation for each resource.

Using the inspection tool, we can see that the formatting such as having bold text, different colors or even different font sizes, will end up splitting the paragraph into different pieces in the structure.

We would need to add each piece separately to our Custom Translations in order for us to replace them dynamically on the front-end:

While this is a bit inconvenient and not very pretty, it's necessary, custom translations mechanism will only be able to replace the text if there is an exact match between your custom translation and how the texts are stored.

In a very simple manner, you are looking to replace X with Y, with X being your original text on the page and Y being your custom translation.

After our custom translation is saved, we go back to our page in the French language we have added the translation for and we can see that we have succesfuly translated that custom liquid text.

Besides allowing you to translate custom/static/hardcoded texts, our Custom Translation feature will also allow you to replace/translate static links.

For our second example, we have added a link via the custom liquid section again, on the same page.

Since the URL is static, while on the French version, our link still leads to our contact page, but in the Primary language, therefore our visitor will be swapped out of their language, which is not the best user experience, fortunately with our custom translations you can add that static URL for a translation.

It's always best to use Chrome's inspection tool (F12) to make sure we get an exact match of the URL

After this is done, we can head back to our Custom Translation tab and press Add content again, but in the left column, we will put our static URL for translation.

For the translated URL version, we simply follow our Market's structure and add /fr/ in the URL for the French locale, depending on your Market structure that could also be:

The same approach would be used for any static/custom/hardcoded text, whether it's coming from a third-party app that you are using in your store or a custom liquid section and it will help you translate them.

Regardless, if you have any trouble setting it up, you can always contact our support to check and help you out.

Once you've added all the necessary entries in the Custom Translations section of the Translation Lab app, you can translate them all at once using the bulk translation feature.
​
To begin, click the Bulk Translate button in the top-right corner of the screen.
​

A window will appear where you can choose what to include in the translation:

After making your selection, be sure to tick the checkbox labeled "Custom Translations" below the options. Then, click Translate to start the bulk translation process.
​

That’s it! Our AI will now process your selected Custom Translations and apply the translations automatically.
​