Exclude words on shopify from google translate

Question

I am looking for a solution to exclude the email [email protected] from translating when using Google Translate on the entire shopify store. The reason is, it becomes [email protected] and does not match the data in GMC (google merchant center), which results in a policy violation… I am using the Sense theme from Shopify.

english, incorrect

german, correct

I have already tried the following, but none worked or maybe I did it incorrectly, I have limited experience but I must resolve this, so any help would be highly appreciated.

1. Writing the address as an HTML entity [email protected]
2. Adding the class “no translate” in the different .json shopify files, always came back with an error “unexpected token”...

Answer 1

You can now add class="notranslate" to any HTML element to prevent that element from being translated.

Google Search Blog

First and easy option is to add a new section of type liquid-code on homepage and render custom HTML markup with notranslate class. Something like

<h4 class="notranslate">✉ [email protected]</h4>

Second option is to edit the section file and add notranslate class. For that,

Edit theme code -> sections -> rich-text.liquid

Line 45-55 is what renders the rich text field that you are using.

{%- when 'text' -%}
  <div class="rich-text__text rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" {{ block.shopify_attributes }}
    {% if settings.animations_reveal_on_scroll %}
      data-cascade
      style="--animation-order: {{ forloop.index }};"
      {% endif %}
  >
    {{ block.settings.text }}
  </div>

Add notranslate class like this and rest of the code should remain same.

{%- when 'text' -%}
  <div class="notranslate rich-text__text rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" {{ block.shopify_attributes }}
    {% if settings.animations_reveal_on_scroll %}
      data-cascade
      style="--animation-order: {{ forloop.index }};"
      {% endif %}
  >
    {{ block.settings.text }}
  </div>

However, this will make all the rich content fields in rich-text section non translatable.

Ideal solution is to add a new type of field in this section that allow you to control the markup or something.