Multi-language Text

Three different field types are available as multi-language types:

• Text

• Markdown text

• HTML

Each of these behave as described for their "single language" counterparts (Text, Markdown, and HTML) but with an important difference as outlined here. All content for the custom field (i.e. across languages) is stored in the same Metafield, so it is important in Liquid to specify which language you need. If you omit this, all languages will be shown This example grabs the English (ISO code 'en') title from a custom field called "title":

{{ product.metafields.accentuate.title.en }}

Matching a language to the visitor's preference

But if we always wanted to show the title in English, there would be no need for multiple languages. We can match the custom field output to any Shopify-translated content by using the language noted in the URL via shop.locale. For example, if you have myshopifystore.com/es/products/great-shirt, you can grab the es language and use it as a key to access your custom field snippet:

{{ product.metafields.accentuate.title[shop.locale] }}

We can also detect the visitor's browser language using a little Shopify magic to show the "title" custom field in the language preferred by the visitor:

{% assign user_language = request.locale.iso_code %}
{{ product.metafields.accentuate.title[user_language] }}

Showing a default value

The above examples will return an empty string if no content was provided for the visitor's language. To properly test if we have some content to show and revert to a safe default, we can apply the code below. This code also showcases that the configured locales (country names' ISO codes) are available in a special Metafield shop.metafields.acf_settings.locales for precisely this purpose:

{% assign default_language = shop.metafields.acf_settings.locales | first %}

{% if product.metafields.accentuate.title[shop.locale] %}
  <p>{{ product.metafields.accentuate.title[shop.locale] }}</p>
{% else %}
  <p>{{ product.metafields.accentuate.title[default_language] }}</p>
{% endif %}

Multi-language Markdown example

In case you were wondering how multi-language Markdown fields work, here is an example (note the .html at the end to get the rendered HTML from the markdown code):

<p>{{ product.metafields.accentuate.markdown_title[shop.locale].html }}</p>

Setting up the languages

Before you can edit content for multi-language fields, you need to tell ACF which languages to handle content for and optionally provide a DeepL API key for built-in translation. So, from your admin side menu, click the "Settings" button to open the settings dialog and go to the "Languages" tab:

In the selection box for "Multiple languages setup", select the languages you need to provide content for. You can select as few or as many languages as you need. Note that languages can be added or removed dynamically, so you don't need to know your complete setup before adding content for each language. If you need to add a language later after setting up content for other languages, you can just do so.

Mind the ordering as this will be reflected in the editor. You can also use the ordering to provide a default language in case a visitor's language is not defined (see below)

When you edit a multi-language custom field, the ACF editor will allow you to input content for each language selected in the above setup. Here is an example of a multi-language text field called "Greetings", allowing input in all three defined languages:

Translating content to other languages

ACF supports in-app translation of content in multi-language fields via an integration with DeepL. DeepL combines deep learning and artificial intelligence to understand and translate text between these different languages:

• Bulgarian

• Czech

• Danish

• German

• Greek

• English

• Spanish

• Estonian

• Finnish

• French

• Hungarian

• Italian

• Japanese

• Lithuanian

• Latvian

• Dutch

• Polish

• Portuguese

• Brazilian Portuguese

• Romanian

• Russian

• Slovak

• Slovenian

• Swedish

When you have multiple languages defined in ACF and your primary language is one of the above, ACF will allow you to translate content in a multi-language field from that primary language to any other language that is listed above. For example, you have English listed as a primary language (the first one in the ordering) with German, French, and Finnish as secondary languages.

With DeepL enabled, ACF will now allow you to translate from English to both German, French, and Finnish. The translation service is available directly from each field. This is an example of a simple text field:

Example for HTML fields with translation available directly from the toolbar:

How to enable DeepL

To use DeepL within ACF, you need a DeepL Pro API subscription. DeepL Pro is a 3rd party service with both a free and a paid option. See details and sign up here. Once signed up, you can go to your DeepL account page and see your API key:

Copy the API key using the copy button to the right of the key and from your Shopify admin, click the "Settings" button in the side menu to open the settings dialog, go to the "Languages" tab, and paste the key into the field for "DeepL API key":

Click "Save" and you're ready to translate your texts in-house.

Disclaimer: DeepL does not give any guarantee regarding the correctness of the translations created by the machine translation system. This is not meant to replace a professional translation service for mission-critical content.