Big Ben, Eiffel Tower and Empire State Building wooden models. Probably a reference to Translation API Internationalization capabilities.

A first look to Shopify Translation APIs

At Unite 2019, Shopify announced the Translation APIs.This is an exciting new feature allowing merchants to publish content in multiple languages.

English (primary): /products/shirt
Spanish (alternate): /es/products/shirt

Translation API opens new doors for merchants that want content published in multiple languages. According to “There are currently 41 million native Spanish speakers living in the US today — and another 11.6 million people who are bilingual“.

This API allows to cover new markets. Examples are not just limited to US Belgium has 3 official languages: French, German and Dutch. There are many countries across the world that fall into this case. Providing content in the user language is not only good to business but also inclusive.

For now, this is only available to developers only using the Unite 2019 developer preview enabled. Let's have a first look on how this will work and how it affects the way we are building Shopify stores right now.

I will not go through a detail setup. Shopify has a in-depth technical guide.
The ShopLocale type allows publishing an alternate locale/language. This will generate a new route on the store. Language files stored in the theme Locales folder, cover the translation for theme strings like search, add to cart, account info… just as before.
Translation API come on top of these and allows to provide alternate language content to product, article, pages content.

How does it actually looks

After publishing a ShopLocale, Shopify will automatically generate a new URL:
Note the '/es' route added the the original URL.

In this quick example I've added translations only for the product title, body_html, options and values. I've also added a quick language selector in the header. I do hope that a language selector will be available in Liquid in the near future.

Translation API & SEO

This can be really helpful for merchants from an SEO perspective. The store content can be translated in multiple languages, merchants will get a boost in organic searches by providing additional localized content to search engines.

By setting up a new route, translated content is treated as a separate page. The canonical link will point to the locale page:

<link rel="canonical" href="">

Translation API & Sections

Unfortunately from my initial tests, the Sections used on a translated page, with ES locales, did not picked the ES translation.

TranslatableResourceType does not contain references to sections. I may be wrong or this is just an early implementation. I do hope that we will be able to translate all the dynamic data we put into stores. There are alternatives in Liquid to detect the language based on routes.root_url and have multiple block types.

How will this affect development

This new API should make developers to think the dev process with internationalisation in mind. Everything needs to pass through the locales lang files, baked in image text will need to be replaced to HTML.

Hardcoded links and text done in the past will bite us in the ass. I believe that this is good, theme code will be more maintainable and also lead to better accessibility and code quality.

Let's recap

What is Translation API?
Allows merchants to publish dynamic store content in multiple languages.
Is is not meant to replace the locales lang files, but work together.
Will be a great way to provide content in multiple languages on a single store.
Will require an APP as it is exposed only to GraphQL, I am sure they will come.
It is currently in Unite preview available the devs only.

What is not
It may fail short when dealing with content assigned trough Sections (needs investigating).
You may not be able to translate APP content, things like Yotpo, Stamped, Disqus will still provide content in its main language.
It is still one store, one inventory, this may not cover all your internationalisation needs.