How to Add Custom Text Translations Using the Visual Editor

This guide can help you to use custom translation when text is not directly accessible through the visual editor

On my stores Homepage there are plenty of different elements with text in them.

When switching to French we can see most of the text has been translated, but there is a section of text that isn't, and I am unable to translate this text with the Visual Editor.

First lets copy the text from the element we want to translate 

Then lets scroll up in the Visual Editor and click on "Custom translation"

Click on the "New Custom Translation" Button

Here we can paste the text that we want to translate, but also notice that the text has extra attributes associated to it, so we can click Code View to clean up the text, if we need too.

There is lots of extra html code with the base text, so lets get rid of everything that isnt the base text 

There we go, all cleaned up.

In the translated text box, lets go ahead and put in the translated text, and create the translation 

Our Translations are set up! We can create a new one or view our translation on our shop 

There we go! Our custom text is now translated!