Translation API opens new doors for merchants that want content published in multiple languages. According to nypost.com: “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 covering new markets. Examples are not just limited to the 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 for 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 at how this will work and how it affects the way we are building Shopify stores right now.
I will not go through a detailed setup. Shopify has an in-depth technical guide.
The ShopLocale type allows publishing an alternate locale/language. This will generate a new route for the store.
Translation API come on top of these and allows to provide alternate language content to product, article, pages content.
How does it actually look
After publishing a ShopLocale, Shopify will automatically generate a new URL:
English: https://dev-preview.myshopify.com/products/shirt
Spanish: https://dev-preview.myshopify.com/es/products/shirt
Note the '/es' route added 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 into 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="https://dev-preview.myshopify.com/es/products/shirt">Translation API & Sections
Unfortunately from my initial tests, the Sections used on a translated page, with ES locales, did not pick 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 think about the dev process with internationalization in mind. Everything needs to pass through the locales lang files, baked image text will need to be replaced with 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 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.
It will require an APP as it is exposed only to GraphQL, I am sure they will come.
It is currently in Unite preview available to the devs only.
What is not
It may fail short when dealing with content assigned through 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 internationalization needs.
