How to Keep Content Untranslated

Some storefront content may need to remain in its original language, even when customers switch to another language.

Common examples include:

• Brand names
• Product or collection names
• Vendor names
• Product models
• SKUs
• Technical terms
• Addresses and contact details
• Custom text

You can use the notranslate CSS class to prevent CountryBlock from translating selected content or your entire storefront.

Exclude specific content

Add class="notranslate" to the HTML element containing the content you want CountryBlock to skip:

<span class="notranslate">
  CountryBlock
</span>

When customers change the storefront language, the text CountryBlock will remain unchanged.

If the element already has a class, add notranslate next to the existing class:

<h2 class="product-heading notranslate">
  CountryBlock Pro
</h2>

Make sure there is a space between the class names. Do not remove the existing class, as your theme may use it for styling or functionality.

Choose the content you want to exclude

The placement of the notranslate class determines which content CountryBlock skips during translation.

Exclude one word or phrase

Use an inline element when only part of a sentence should remain untranslated:

<p>
  Powered by <span class="notranslate">CountryBlock</span>
</p>

CountryBlock will skip only the marked text. The rest of the sentence will still be translated normally.

Exclude a complete element

Add the class directly to an element when all text inside it should remain untranslated:

<p class="notranslate">
  Model CB-2026
</p>

Exclude an entire content area

Add the class to a parent element to exclude everything inside it:

<div class="technical-details notranslate">
  <h3>CB-Pro Series</h3>
  <p>SKU: CB-2026-BLK</p>
  <p>Batch: A00158</p>
</div>

In this example, CountryBlock will skip all text inside the <div>.

caution

Only add notranslate to the content that should remain unchanged.

If you add it to a large section, all text nested inside that section will also be excluded from translation.

Exclude the entire storefront from translation

If you want CountryBlock to stop translating all storefront content, add the notranslate class to the opening <html> tag in your theme's theme.liquid file.

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to update.
3. Click the three-dot icon (⋯).
4. Select Edit code.
5. In the Layout folder, open theme.liquid.
6. Find the opening <html> tag near the beginning of the file.

If the tag does not currently have a class, update it as follows:

Before:

<html lang="{{ request.locale.iso_code }}">

After:

<html class="notranslate" lang="{{ request.locale.iso_code }}">

If the <html> tag already has a class, add notranslate to the existing class attribute:

Before:

<html class="no-js" lang="{{ request.design_mode }}">

After:

<html class="no-js notranslate" data-design-mode="{{ request.design_mode }}">

important

Adding notranslate to the <html> tag excludes the entire storefront from automatic translation.

Customers can still see the language switcher, but CountryBlock will not translate any content contained within the page.

To enable storefront translation again, remove notranslate from the <html> tag.

Add the class to specific Shopify theme content

1. Open the theme code editor

1. Go to Online Store > Themes.
2. Find the theme you want to update.
3. Click the three-dot icon (⋯).
4. Select Edit code.

2. Locate the content in your theme

Shopify themes use different file structures, so there is no single file that contains all storefront content.

You can use your browser's inspection tool to identify the relevant HTML element:

1. Open the affected page on your storefront.
2. Right-click the content you want to exclude.
3. Select Inspect.
4. Find the HTML element containing the text.
5. Note its class, ID, or Liquid variable.
6. Return to the Shopify theme code editor.
7. Search for the identified class, ID, or Liquid variable.

For example, a product title may use this Liquid variable:

{{ product.title }}

The original theme code may look like this:

<h1 class="product__title">
  {{ product.title }}
</h1>

Add notranslate to the existing class:

<h1 class="product__title notranslate">
  {{ product.title }}
</h1>

Click Save after making the change.

More examples

Exclude a brand name

<span class="brand-name notranslate">
  My Brand
</span>

Exclude a product title

<h1 class="product__title notranslate">
  {{ product.title }}
</h1>

A product title may appear in multiple places, including:

• Product pages
• Collection pages
• Search results
• Featured product sections
• Product recommendations
• Cart drawers

You may need to update more than one theme element if the title should remain untranslated everywhere.

Exclude a product vendor

<span class="product__vendor notranslate">
  {{ product.vendor }}
</span>

Exclude a product SKU

<span class="product__sku notranslate">
  {{ product.selected_or_first_available_variant.sku }}
</span>

Exclude a variant value

<label class="product-option__value notranslate">
  {{ value }}
</label>

Exclude an address

<address class="notranslate">
  123 Market Street, San Francisco, CA 94105
</address>

Check the result on your storefront

After saving the theme file:

1. Open your storefront in a private or incognito window.
2. Navigate to the updated page.
3. Change the language using the CountryBlock switcher.
4. Confirm that the excluded content remains in the original language.
5. Check that the surrounding content is still translated normally.
6. Repeat the test on both desktop and mobile.

If you added notranslate to the <html> tag, confirm that all storefront content remains in the original language.

The content is still being translated

If CountryBlock continues translating the content, check the following:

• Make sure notranslate is spelled correctly and written in lowercase.
• Confirm that the class was added to the element containing the text.
• Check that you edited the theme currently displayed on your storefront.
• Clear your browser cache or test again in an incognito window.
• If the same content appears in multiple sections, confirm that each relevant element has the notranslate class.
• To exclude the entire storefront, confirm that notranslate was added to the opening <html> tag in theme.liquid.

Need help?

If you are unsure which theme file or element to edit, please contact our support team at [email protected].

To help us check and configure it for you, please include:

• Your Shopify store URL
• The page containing the content
• The exact text you want to keep untranslated
• A screenshot showing where the text appears
• Your Shopify Collaborator access code

If you are not sure where to find the code, follow our guide: How to Grant Collaborator Access.

Once we receive the required information, our support team will send a collaborator request and assist you with the setup.