How to add text for custom translation

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:

Enable App Embed
Translate Plain text
Translate Formatted text
Translate URL's

"Custom Liquid" sections are a perfect example of cases where you would need to use Custom Translations, as they are not defined as a transletable resource in Shopify.

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 Tab and from the "Translation of" dropdown - choose "Custom Translations":

Enable the App Embed

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;

then toggle " Custom Translation" on and save.

or press the shortcut button " Configure" available in the Custom Translations tab.


Regardless of the approach, you just have to make sure the app embed is enabled 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 you 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.

When translating Plain Text

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 if your "AI Translate" is toggled for the language you are making the custom translation for.

The end result should like this:

Translating Formatted Text

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, then you can see the structure that you 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 inspected, we can see that the formatting such as having a bold text, different color or even different font-size, 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.


When adding formated text for custom translation, you have to copy just the raw/unformatted text part. All open/closing tags and formatting such as "< strong >" or " < span > " should not be copied.


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", while "X" being your original text on the page and "Y" being your custom translation.


Note: Custom Translations might take up to a minute to show in your store, it's always best to check your page in Incognito mode after you have made 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 replace/translate static links.

Translating URL

For our second example, we have added a link via 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 this 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 Markets structure that could also be:
hard-coded
a) store.com/fr/pages/contact
b) store.fr/pages/contact
c) fr.store.com/pages/contact

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.

Custom Translations will only work as long as the text you have added is an exact match.

It's important to note that our custom translations load via JavaScript and "translate" the content by replacing the text on the front-end.

Updated on: 19/12/2024