Exclude specific content from Auto translation

Transtore automatically translates content across your storefront to help customers browse in their preferred language. However, there may be situations where certain content should remain unchanged regardless of the selected language.

Common examples include:

• Brand names
• Product names
• Product vendors
• Product variants, such as Size, Color, and Material
• Footer content
• Custom text

To prevent Transtore from translating specific content, add the notranslate class to the HTML element that contains the content.

tip

Before you start

This guide requires basic knowledge of Shopify theme editing and HTML.

Because every Shopify theme is structured differently, there is no fixed file location for the content you want to exclude from translation.

How the notranslate class works

Transtore skips content inside an element that contains the notranslate class.

For example:

<div class="notranslate">Your content here</div>

Any text inside this element will remain unchanged in all languages.

Step 1: Access your theme code

1. From your Shopify admin, go to Online Store → Themes.
2. Select the theme you want to edit.
3. Click ⋮ → Edit code.

Step 2: Locate the content in your theme

Use your browser's Inspect tool to find the HTML element that contains the content you want to exclude from translation.

1. Open your storefront.
2. Right-click the content you want to exclude.
3. Select Inspect.
4. In the developer tools panel, locate the HTML element containing the text.
5. Note any unique classes, IDs, or Liquid variables associated with that element.
6. Return to your Shopify theme code and search for the corresponding class name, ID, or Liquid variable.

Step 3: Add the notranslate class

Add notranslate to the element that contains the content you want to exclude.

If the element already has a class attribute:

<h1 class="product-title notranslate">Product Name</h1>

If the element does not have a class attribute:

<h1 class="notranslate">Product Name</h1>

Keep the existing content, Liquid code, and other attributes unchanged.

Common examples

Exclude brand name

If you want your brand name to remain unchanged:

1. Open the file that contains your brand name.
2. Locate the element that displays the brand name.
3. Add the notranslate class to that element.

Example:

<span class="brand-name notranslate">
  {{ shop.name }}
</span>

Exclude product title

If you want product names to remain unchanged:

1. Open a product page on your storefront.
2. Right-click the product title and select Inspect.
3. Identify the HTML element containing the product title.
4. Search for the corresponding code in your theme.
5. Add the notranslate class to the wrapper element.

Example:

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

Common Liquid variables include:

• product.title
• product_card.title
• product-single_title

Exclude product vendor

If you want vendor names to remain unchanged:

1. Inspect the vendor name on your storefront.
2. Locate the corresponding code in your theme.
3. Add the notranslate class to the wrapper element.

Example:

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

Common Liquid variables include:

• product.vendor
• cart-product.vendor

Exclude footer content

If you want all footer content to remain unchanged:

1. Inspect any content inside the footer.
2. Identify the main footer wrapper element.
3. Locate the corresponding code in your theme.
4. Add the notranslate class to the footer wrapper.

Example:

<footer class="footer notranslate">
  <!-- Footer content -->
</footer>

Exclude product variants and options

If you want options such as Size, Color, Material, or other variant values to remain unchanged:

1. Open a product page.
2. Inspect the variant selector or option labels.
3. Locate the corresponding code in your theme.
4. Add the notranslate class to the element that outputs the variant value.

Example:

<label for="{{ input_id }}" class="notranslate">
  {{ value }}
</label>

Or:

<select name="id">
  {% for variant in product.variants %}
    <option value="{{ variant.id }}" class="notranslate">
      {{ variant.title }}
    </option>
  {% endfor %}
</select>

Common files where variant content may be rendered include:

• sections/main-product.liquid
• sections/product-form.liquid
• snippets/product-form.liquid
• templates/product.liquid
• product-template.liquid
• product-variant-options.liquid

Exclude multiple sections

To exclude content in multiple sections, add the notranslate class to each relevant element.

Example:

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

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

If several elements are inside the same wrapper, you can add the class to the wrapper:

<div class="product-info notranslate">
  <h1>{{ product.title }}</h1>
  <span>{{ product.vendor }}</span>
</div>

All content inside this wrapper will be excluded from Auto translation.

Exclude the entire storefront

To prevent Auto translation across your entire storefront:

1. From your Shopify admin, go to Online Store → Themes.
2. Select the theme you want to edit.
3. Click ⋮ → Edit code.
4. Open Layout → theme.liquid.
5. Locate the opening <html> tag.
6. Add notranslate to the existing class attribute.

Before:

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

After:

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

If the <html> tag does not have a class attribute:

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

Click Save after updating the code.

tip

Keep your existing theme code

Only add the notranslate class to the existing <html> tag. Keep all other attributes and Liquid code unchanged.

Check the result

1. Open your storefront.
2. Use the Switcher to select a target language.
3. Check that the excluded content remains unchanged.

If you added notranslate to the <html> tag, Auto translation will be disabled across the entire storefront.

Need help?

If you're unsure where to add the notranslate class in your theme, contact us at [email protected] and we'll be happy to assist.