How to translate 3rd party apps and dynamic text with the Visual Editor?

Shopify doesn’t support translating text from third-party apps or custom Liquid sections by default. To fill this gap, the Translate & Currency app offers a Visual Editor that lets you translate all the text on your storefront, including content from Shopify, third-party apps, and dynamic/custom sections.

With the Visual Editor, you can translate text either manually or automatically using AI translation. For step-by-step instructions, follow the written guide or check out the video tutorial below.

Note: The Visual Editor tool is only available on Paid plans. Additionally, this tool is only available to published languages in Advanced type. You must also enable the translator code snippet in order to use the Visual Editor.

Getting Started with the Visual Editor

Navigate to the Translation page in the app.
Then click the Visual Editor tool.
Once you open the tool, if your store is unpublished and therefore has a front-end password, you will need to enter it.
After that, you will see your store in the tool. Before you can start making translations, you will need to change languages, which you can do at the top of the page.
Once you have changed languages, you can start making translations with the Visual Editor! When you mouse over text in this tool, you will see a blue box appear around it, with two buttons, as shown below. The pencil button is for the manual entry tool, and the AI button is for the AI translation tool.

Note: If the pencil and AI buttons don’t appear when you hover over the text you want to edit, try clicking the Scan Missing Tags button in the top right corner. After that, the options should be available.

Additionally, the three buttons in the top right corner will only appear if you change the language from the default to another one.

Manual Entry Translation

The manual entry tool lets you type in your own translation for any selected text.

AI Translation

Note: Our AI translation technology uses OpenAI's ChatGPT-4 by default. If there are any errors or issues with the translation, we use Anthropic's Claude 3 and Google’s AI-powered Cloud Translation as fallback options.

The AI translation tool works by adding your selected text to a queue. After selecting all the text you’d like translated, click Autopilot Translation in the top right corner and choose Create autopilot translation task. This will process all queued translations in one go.

Note: You can always revert a task by clicking the Revert button if you’re not satisfied with the translation result.

Custom Translation Feature

This feature is useful when the Visual Editor can’t display certain text you want to translate. For example, you can’t add products to the cart while using the Visual Editor, so if you need to translate text that only appears after a product is added, you’ll need to use the custom translation feature.

With the custom translation feature, you can manually enter any text and its translation. The Visual Editor will then replace all matching original text on your storefront with your provided translation.

Note: For more detailed steps on using the custom translation feature, please visit this guide.

If you need assistance, please email us at help@hextom.com and we'd be happy to help!