How do I translate hard coded text? (TMS)

Hard coded text is not considered translatable by Shopify. If you add text to the theme code manually, Shopify would not send this text to our Translate My Store (TMS) App to translate. This guide will show you how to convert your hard coded text into translatable text.

We have added the following sentence to our cart page. "Rate our products by clicking" and "here" (the word "here" is a link).

In order to convert this hard coded text to translatable text, we need to perform the following actions:

1. Click on Online Store --> Themes and then click on the Actions dropdown menu next to your theme and then select Edit Code.

2. Find your hard coded text.  In this guide, it has been added to the cart.liquid page. Find the text you added.

3. Convert this into translatable text. To do this, you will need to edit the default.json file that's located in Locales. In this example, the file that needs to be edited is en.default.json.

This file contains a key and value for each item. We will add 2 key-value pairs to replace the hard coded text. We will be adding these keys under Cart:general.  Since we have a link, we will create 2 key:value entries. 

In this guide, we have named one key rate_product and the other one rate_product_email.  

The key must have quotation marks around it followed by a colon. Then the value, which is the text you will be adding, comes after it and it must also have quotation marks around it. If this is not the last key, you need to add a comma at the end.

"rate_product": "Rate our products by clicking ",
"rate_product_email": "here"

After you have created the keys and values, you will need to go back to the cart.liquid file and replace the hard coded text with the keys you just created.

We will be using objects so you will need to wrap the keys around 2 curly braces.  We will also use the translatable filter following the key | t

Now that the hard coded text has been replaced with this:

<p> {{ 'cart.general.rate_product' | t }} <a href="http://www.google.ca">{{ 'cart.general.rate_product_email' | t }}</a></p>

This text is now translatable and you can find it in the app. You will just need to scan your store again to find this text.