How to add text for custom translation

Custom translations play a pivotal role in enhancing user experiences by allowing you 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 load or when an 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.

"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":



If you have not created any custom translations yet, simply press "add first resources" to begin.



We are going to proceed with the "Custom" (manual) method for our example.

The "Title" is only for your convenience, it's not vital part of 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 in the right box we need to put our translation.

Simply left click on the text in the left box to start adding your text.



The end result should like this:



You can also auto-translate by using the (>) if your "AI Translate" is toggled for the language you are making the custom translation for.

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.

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:

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: 27/11/2023