Skip to main content
Reference

Preventing Content from Being Translated

Some text should stay exactly as you wrote it in every language. Brand names, product model numbers, code samples, and trademarked wording all lose their meaning when they are translated. To keep a piece of text in its original language, mark it with the notranslate class.

The form that always works​

This works in every kind of content, so use it if you want one thing to remember:

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

Everything inside is left in the original language. Everything outside translates normally, so you can protect a single phrase in the middle of a sentence:

<p>The <span class="notranslate">ACME PRO-5000</span> ships in three business days.</p>

In HTML content​

In content that is already HTML, such as an HTML element in the StoreFront Visual Builder or a theme template, notranslate behaves the way it does anywhere else on the web. Put the class on whatever element makes sense:

<div class="notranslate">
  <p>ACME PRO-5000</p>
  <p>Model 4417-B</p>
</div>
<td class="product-code notranslate">4417-B</td>

Extra classes, other attributes, and single or double quotes are all fine here. The translation engine is reading real markup, so it applies the class much as a browser would.

In plain text settings​

Single-line text settings, such as a headline or a button label, are a different case. Those are handled as plain text rather than markup, so UltraCart looks for one specific string to recognize that you have marked something:

<span class="notranslate">

When it finds that exact string, it switches the field over to HTML handling so the class is respected. The match is literal, so in a plain text setting these do not work:

MarkupWhy it fails in a plain text setting
<span class='notranslate'>Single quotes. The match requires double quotes.
<span class="notranslate highlight">Extra class. Nothing may follow notranslate inside the quotes.
<span class="noTranslate">Wrong capitalization. The match is case sensitive.
<div class="notranslate">Wrong element. It must be a span.
<span class="notranslate">Two spaces before class. Only one space is allowed.
<span id="model" class="notranslate">Another attribute comes first. class must come immediately after span.
warning

Nothing warns you when the form is wrong in a plain text setting. The content is simply translated as though the marker were not there. If protected text in a headline or label is coming back translated, check it against the exact form above before anything else.

Why the two cases differ​

Text and HTML are handed to the translation engine differently. HTML is sent in a mode where the engine understands markup and honors notranslate on any element. Plain text is sent as text, and in that mode any markup you type would be treated as words to translate rather than as instructions.

UltraCart bridges the gap by scanning plain text content for the exact string <span class="notranslate">. Finding it is the signal to switch that field over to HTML handling. That scan is a literal text match, which is why spacing, quoting, capitalization, and the element name all have to be right in that one case, and why none of it matters once the content is already HTML.

If you would rather not think about which case you are in, use the plain <span class="notranslate"> form everywhere. It satisfies both.

Where you can use it​

The notranslate class works anywhere your StoreFront content is translated:

  • HTML and text element settings in the StoreFront Visual Builder
  • Page, item, and blog post text
  • Theme template content

What is worth protecting​

Reach for notranslate when translating the text would make it wrong, not merely different:

  • Brand and product names, especially ones that are ordinary words in English
  • Model numbers, SKUs, and part numbers
  • Code samples, configuration snippets, and file names
  • Trademarked taglines and legal wording you are required to reproduce exactly
  • Names of people and places that should not be localized

Do not use it as a general "I do not like this translation" tool. If a translation is simply poor, edit that language's text directly instead so shoppers still read the content in their own language. See Multi-Language Content in the Visual Builder for how to edit a single language's wording.

Was this page helpful?