Re: Translating with Translate & Adapt for text that is written in the code

agoedseels · ‎06-22-2023

Hi,

I coded a lot of things on my website and wrote some text in the coding that is visible on the front-end.

I am using the app Translate & Adapt for the translation of my website from Dutch to English and French. The app doesn't translate the text I wrote in the coding which is visible on the front-end. How can I make sure it does translate it?

Thank you so much!

Nasar1999 · ‎06-25-2023

I had same problem and I got the help from ChatGPT, just I told him what language I have what is platform I use and then He changed the code to be like that:

<!DOCTYPE html>

<head>

<style>

</style>

</head>

<body>

<span>

{% case shop.locale %}

{% when 'es' %}

En Fleurlovin, encontrarás

{% when 'zh-CN' %}

在Fleurlovin，你将找到

{% else %}

At Fleurlovin, you'll find

{% endcase %}

</span>

{% case shop.locale %}

{% when 'es' %}

lujo

{% when 'zh-CN' %}

豪华

{% else %}

luxury

{% endcase %}

</b>

<b>

{% case shop.locale %}

{% when 'es' %}

innovación

{% when 'zh-CN' %}

创新

{% else %}

innovation

{% endcase %}

</b>

<b>

{% case shop.locale %}

{% when 'es' %}

comodidad

{% when 'zh-CN' %}

舒适

{% else %}

comfort

{% endcase %}

</b>

<b>

{% case shop.locale %}

{% when 'es' %}

elegancia

{% when 'zh-CN' %}

优雅

{% else %}

elegance

{% endcase %}

</b>

<b>

{% case shop.locale %}

{% when 'es' %}

inspiración

{% when 'zh-CN' %}

灵感

{% else %}

inspiration

{% endcase %}

</b>

<b>

{% case shop.locale %}

{% when 'es' %}

emoción

{% when 'zh-CN' %}

兴奋

{% else %}

excitement

{% endcase %}

</b>

<b>

{% case shop.locale %}

{% when 'es' %}

calidad

{% when 'zh-CN' %}

质量

{% else %}

quality

{% endcase %}

</b>

<b>

{% case shop.locale %}

{% when 'es' %}

sofisticación

{% when 'zh-CN' %}

精致

{% else %}

sophistication

{% endcase %}

</b>

<b>

{% case shop.locale %}

{% when 'es' %}

diversidad

{% when 'zh-CN' %}

多样性

{% else %}

diversity

{% endcase %}

</b>

<b>

{% case shop.locale %}

{% when 'es' %}

originalidad

{% when 'zh-CN' %}

独创性

{% else %}

originality

{% endcase %}

</b>

</span>

</h1>

</section>

</body>

</html>

sanderl · ‎04-17-2025

I experienced the same, let's assume you have a 'section' which can have 'custom code' like liquid code and html. You could something like:

{% if localization.language.iso_code == 'en' %}

  <p>Here comes the English version.</p>

{% else %}

  <p>Dit is de originele versie in het Nederlands.</p>

{% endif %}

You could implement and extra if else when more languages involved. It's a pity that you cannot access the section from your Translate&Adapt extension, so this could be potentially a labour intensive task when having lot's of custom code sections.

richbrown_staff · ‎06-27-2023

Hey @agoedseels , unfortunately custom liquid code cannot be translated as standard. It's possible to make liquid translation aware, but not simple. It involves adding a 'translation key'. More info here:

https://www.shopify.com/uk/partners/blog/translation-keys

https://shopify.dev/api/liquid/filters#translate

See someone who's done it here: https://community.shopify.com/c/shopify-translate-adapt/text-added-manually-to-the-theme-s-code-how-...

If you can, I'd try to replace the custom coding with sections from the Online Store, using standard HTML blocks, which can be translated.

To learn more visit the Shopify Help Center or the Community Blog.

Transcy · ‎06-29-2023

Hello @agoedseels ,

If you have custom text that is written directly in the code of your website, the Translate & Adapt app might not automatically detect and translate that content, it primarily designed to translate the standard text within the Shopify elements and settings.

To translate custom text that is embedded in the code, you'll need to handle the translation manually or use a different approach.

Manual translation: Extract the custom text from your code and manually translate it into the desired languages. You can keep separate versions of the translated text and conditionally display the appropriate translation based on the selected language.
Translation files: Create separate translation files for each language you want to support, define language-specific translations for the custom text used in your code. Then, dynamically load the translations from the appropriate file based on the selected language.
Translation libraries or frameworks: Utilize translation libraries or frameworks that offer support for translating custom text within your code. Examples include i18next, react-i18next, or vue-i18n. These libraries provide features and functions to handle translations within your codebase, including custom text.

Hope this can help.

Transcy.

Transcy - The #1 Translation and Currency Converter
- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog

Transcy · ‎07-11-2023

Hello @agoedseels ,

If you have custom text that is written directly in the code of your website, the Translate & Adapt app might not automatically detect and translate that content, it primarily designed to translate the standard text within the Shopify elements and settings.

To translate custom text that is embedded in the code, you'll need to handle the translation manually or use a different approach.

Manual translation: Extract the custom text from your code and manually translate it into the desired languages. You can keep separate versions of the translated text and conditionally display the appropriate translation based on the selected language.
Translation files: Create separate translation files for each language you want to support, define language-specific translations for the custom text used in your code. Then, dynamically load the translations from the appropriate file based on the selected language.
Translation libraries or frameworks: Utilize translation libraries or frameworks that offer support for translating custom text within your code. Examples include i18next, react-i18next, or vue-i18n. These libraries provide features and functions to handle translations within your codebase, including custom text.

Hope this can help.

Transcy.

Transcy - The #1 Translation and Currency Converter
- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog

Re: Translating with Translate & Adapt for text that is written in the code

Translating with Translate & Adapt for text that is written in the code

Community Blog Articles