How to use custom translations in visual editor
Shopify does not support the translation of text from third-party apps or custom text. If Shopify does not recognize the text as translatable, it won't appear in the manual or AI translation tools within the app. To translate such text, you can use the visual editor tool.
The visual editor is a "What You See Is What You Get" (WYSIWYG) editor that allows you to view your website and translate all content, including text from Shopify, third-party apps, and dynamic or custom content.
For text that contains HTML—such as content created with a page builder—the custom translation tool is more reliable, as it allows you to manually input the base text. Here is an example of how to use the custom translation feature in the visual editor.
Example:
My store's homepage contains various elements with text. When switching to French, I noticed that the Reviews section remains untranslated, as Shopify does not treat this text as translatable. To address this, we can use the "Custom Translation" feature in the visual editor to reliably translate these elements.
Go to the "Visual Editor" page in the sidebar and select the language you want to translate.
- Copy the original text from the element you want to translate.
- In the visual editor, click on the "All translations" button to open the custom translation pop-up, and then click on "Add translation" button to add a new entry. Please refer to the GIF below.
- Toggle to code view and paste the original text in the "Base text" box, then switch back to text view.
- Toggle to code view on the "Translation text" box and input the translation, then switch back to text view.
Click on "Create" to save the custom translation.
Note
The custom translation can input text in code or rich text editor views. However, we recommend using the code view most of the time to avoid adding unexpected HTML code to the text.
As you can see on the website, the section we've translated using custom translation is already complete. You can follow the same steps to add more custom translations for your store.
Tip
Need to know more about the Visual Editor? Check out this guide.
If you have any further questions or concerns, please feel free to reach out to us at help@hextom.com