Skip to main content
How-to

Multi-Language Content in the Visual Builder

The StoreFront Visual Builder edits one language at a time. You pick the language you want to work in, the page redraws in that language, and any wording you change is saved for that language alone. This guide covers switching languages, editing a translation, and what the builder shows you while content is still being translated.

Before you start, enable the languages you want on your StoreFront. See StoreFront Languages.

How the Visual Builder stores translated content​

Every text and HTML setting in the Visual Builder holds a separate value for each language, with English as the source. When you view a setting in another language and no wording has been saved for it yet, UltraCart translates the English source automatically and shows you the result.

That translation is generated on demand rather than stored up front. The practical consequence is that the first time you open a setting in a new language, you may briefly wait for it. Once translated, it is reused.

Switch the language you are editing​

  1. Open the Languages panel in the Visual Builder sidebar.
  2. Find the language you want in the Language column.
  3. Click the pencil icon in the Edit column for that row.

The builder covers the screen while it works and reports its progress, starting with Changing language to followed by the language name. It updates the cart, then redraws every section of the page in the new language. Wait for it to finish. The screen is deliberately blocked so you cannot start editing content that is only half redrawn.

When it is done, the currently selected language is highlighted in the list and the page is shown in that language.

note

If the panel says This theme does not support multiple languages, your theme predates internationalization support. You will need to move to a current theme before you can translate content. See StoreFront Languages.

If some content is still being translated​

If the language change finishes while translations are still running, the builder tells you so and asks you to reload the editor in a moment to pick them up. This is normal on a page with a lot of content, and it is most likely the first time you switch to a given language. Nothing is lost. Give it a minute, reload the Visual Builder, and the content will be there.

Edit the wording for one language​

With the builder set to a language other than English, open any text or HTML element and edit it as you normally would. What you type is saved as that language's wording only. Your English source is untouched, and no other language changes.

This is how you fix a machine translation that reads badly, adapt a marketing phrase that does not carry over, or shorten wording that overflows its layout in one language.

tip

Edit the English source first and get it final, then switch languages and refine. Changing the English text after you have hand-edited a translation does not update that translation, because a language with saved wording keeps it.

Find settings that have custom translations​

While editing in English, a globe icon appears next to the label of any setting that has custom wording saved in other languages. Hover over it to see Modified Translation(s) and the list of languages, each with its name and language code.

Use it as a safety check before you rewrite English copy. If a setting carries hand-edited translations, changing the English will leave those languages saying the old thing.

What you see while content is translating​

Short pieces of text translate fast enough that you will rarely notice. Large blocks of HTML take longer, and the builder shows you what is happening rather than letting you edit content that has not arrived.

While a translation is running, the button that opens the editor for that setting shows a spinner and reads Translating... instead of its usual label. A globe icon also appears next to the setting name. The button is unavailable for as long as the translation is running.

When the translation arrives, two things happen on their own. The button becomes active again and reads its normal label, and the element refreshes on the page to show the translated content. You do not need to close and reopen the settings panel, and you do not need to reload the editor.

When a block is too large to wait for​

Very large blocks of HTML, in the range of tens of thousands of characters, can take longer to translate than the editor is able to wait. This is the one case where the automatic refresh described above cannot help, because the editor never receives the finished translation to show you. When it happens, the button reads Refresh To Edit and the builder tells you the translation is still running in the background.

The translation is not lost and it is not stuck. It continues on UltraCart's servers and finishes normally. To pick it up:

  1. Wait a minute or two.
  2. Reload the Visual Builder.
  3. Open the element again. The translated content is there and the editor opens normally.
warning

The button stays unavailable on purpose while a translation is finishing in the background. If you were able to edit and save at that moment, whatever you saved would become your custom wording for that language, and it would permanently replace the translation being prepared for you. Reloading is the only step needed.

Keep specific text out of the translation​

Brand names, model numbers, and code samples usually should not be translated at all. Mark them with the notranslate class and they will be left alone in every language:

<span class="notranslate">ACME PRO-5000</span>

Inside an HTML element you can put the class on any tag that suits the markup. In a single-line text setting such as a headline or button label, use the exact span form above. See Preventing Content from Being Translated for the details.

Was this page helpful?