May 10, 2023
•
7 min read
The world is getting smaller. Innovations in e-commerce, including the introduction of Shopify’s Markets, are helping merchants untap new markets and global customers. But what if those customers don’t speak the same language as you?
Approximately 1.5bn people speak English worldwide, but this doesn’t mean you can successfully internationalize your brand by selling to global customers in just one language.
For example, if you want to sell your product or service to a customer in Germany, they’ll likely speak English (figures suggest over 50% of the population), but it might not be their preferred language. Customers are more likely to place trust in a store that serves up content in their native tongue, and over 70% of customers said that they would be more likely to purchase a product if it was presented in their own language.
So where do you start? Fortunately, through Shopify’s constant evolution and its extensive app ecosystem, there are several options to help you ensure your customers are browsing your website and completing their purchases in a language they understand.
First, let’s take a look at the different types of translations available:
Automated translations are a quick and cost-effective way to present your content in a local language. However, these are often quite literal and might not read as fluently to a native speaker.
Professional translation can be expensive but ensures that your intended audience will read and understand your content. If you choose this route, a native speaker will take an export of your store content and translate it, allowing you to import it back into your store via your app of choice.
Alternatively, you could automatically translate your content and have it reviewed by a native speaker, making edits to the automated output to give it a more natural feel.
With all this in mind, let’s look at some of the runners and riders in the Shopify translation space.
In the past, the only way to translate content in Shopify without using a third-party app was to import it directly into your store. This was cumbersome, time-consuming, and involved messy spreadsheets, making it prone to error.
However, the recent introduction of Shopify’s Translate & Adapt app is their first real step into content translation. Utilizing Shopify’s own native Translations API, Translate & Adapt provides a slick User Interface (UI) to help merchants translate and manage multiple languages across your store. The UI is also great for translating email templates too.
Working seamlessly with Shopify Markets and harnessing Google’s Cloud Translation API, Translate & Adapt allows you to automatically translate up to two languages free of charge and import your own translations (up to 20 languages in total). You can translate all content across the store or target specific items, such as theme elements, products, collections, or blog posts. Additionally, you can edit the translations manually should you need to.
By using Shopify’s Translations API, translations take place server-side, and the content is translated before it’s presented on the front end resulting in faster rendering – but more on this later.
Translate & Adapt also allows you to create custom, localized content for different markets. For example, if you serve both the UK and US markets and sell plumbing products, you might want to list an item as a kitchen tap in the UK and a kitchen faucet in the US. Additionally, you can show different banners or graphics for each market to account for regional differences, market-specific promotions, or local holidays.
While Translate & Adapt is compatible with other third-party apps which use the Translations API or save content to the theme, there are some limitations.
While Shopify will no doubt continue to build out features to go toe-to-toe with the more established translation players, Translate & Adapt is still somewhat limited. It’s a great tool if you need a small number of languages and have a fairly basic theme with a few apps, but if you have more complex requirements, you may want to consider a third-party solution.
LangShop is a powerful, feature-rich platform that utilizes the Shopify Translations API. Allowing translation into over 240 languages, including automatic translations via a choice of translation engines. It also enables you to integrate directly with professional translation agencies (additional charges may apply), directly import your own translations, and make manual edits as required.
As with Translate & Adapt, translations take place server-side and are stored within Shopify via the Translations API, however with LangShop, you also have the ability to translate content client-side ‘post render’ with additional development (providing the content in question is not rendered in an iframe) as well as being able to translate meta fields and tags.
Another strength of LangShop is that it allows you to translate unpublished themes – a great help in testing and proofreading. Plus, it also allows you to protect words, phrases, or brand names via a Glossary to ensure they’re never translated or that they’re translated in a specific way.
It’s worth noting that LangShop can work alongside Translate & Adapt as they are both essentially a UI sitting above the Shopify Translations API. You might, for example, want to use the Translate & Adapt UI for editing email notification translations and LangShop for everything else.
Unlike Translate & Adapt and LangShop, Weglot doesn’t store translations via the Shopify Translations API. Instead, all translations are stored within the Weglot infrastructure and rendered client-side post-render.
Weglot supports a maximum of 20 translated languages (on its extended plan). However, their Enterprise plan can support more than this and facilitates automatic and manual translation options.
Just like LangShop and Translate & Adapt, Weglot has a side-by-side editor allowing you to review and manually edit your translations. The key difference with the Weglot UI is it’s completely outside Shopify and sits within its own admin panel, meaning that you’re managing content in two different places.
Because the Weglot translations happen client-side, any new content published in your Shopify theme is automatically translated; Weglot scans the content on the first render and translates and stores any fresh content it finds within its own databases. Furthermore, Weglot can translate any third-party or dynamically generated content, providing you identify the required element (CSS class or ID) through the Weglot UI Dynamic Elements section. Again, Weglot scans the content on page load and translates whatever it finds.
While Weglot will translate pretty much anything it finds on the front end, what it won’t do is automatically translate your notification emails. This can be achieved relatively easily with a little coding, but it won’t happen when you hit ‘translate.’
Weglot can also be used alongside Translate & Adapt if you wish to supplement the functionality.
Translate & Adapt is a free app provided by Shopify, and while both LangShop and Weglot have free options, charges vary depending on the tier you need.
Let’s take a moment to outline the differences between server-side and client-side rendering.
Server-side translations in Shopify use the platform’s translation API, meaning the translated content is stored within Shopify’s architecture. Content is loaded directly to the front end from within Shopify, resulting in a much quicker page load speed as no ‘last minute’ or ‘on the fly’ switch is happening.
Another benefit of this is that the content is loaded in the correct language the first time, so it’s crawled and indexed by search engines in the intended language. Additionally, sitemaps are generated in the appropriate languages as Shopify holds all of the content, irrespective of the language, so SEO shouldn’t be a problem.
Having the content stored directly in Shopify has another advantage for third-party system integrations. For example, there is no need to consider how to hook up a PIM or ERP to both Shopify and the translation source.
The downside is that only content that Shopify can access is translated in advance. Any content that is dynamically generated on the fly won’t be translated server-side. Targeting these elements post-render with a little javascript code is usually possible, but it requires some development effort.
Client-side translations happen on the front end. With an application such as Weglot, the content is translated and stored outside of Shopify, and the primary language is replaced post-render.
For example, the content is loaded in from Shopify and then switched to the selected language with content from Weglot using javascript. All this happens in the blink of an eye, and the content is cached, making for speedier subsequent loads. However, the store’s primary language is still loaded initially until the translated content is rendered. This can have an impact on page speed as well as potentially hindering SEO efforts if not carefully managed.
Likewise, Shopify has no knowledge of the translated content as it sits off-site within the Weglot architecture, so Shopify’s server-generated sitemaps won’t contain any translated content.
Integrations with third-party systems can also be challenging as your storefront content effectively sits in two different systems.
On the plus side, third-party app content can easily be targeted and translated as the translation happens once the content has been loaded into the front end.
Now you’ve identified your markets and chosen your translation provider. What else do you need to consider to ensure you’re presenting your content to your target audience in the best possible way?
If you have a single store serving multiple languages, you usually opt for a sub-folder for each language, e.g., mystore.com and mystore.com/de. In this example, Shopify would generate a separate sitemap for the English and German languages.
But, once you add markets into the mix, more options become available. You might have one store with multiple markets, each in different languages. For example, your store may serve the UK, have English as its primary language, and its primary domain as mystore.com. Then you might have an additional market serving France in Euros, available in both French and English language. The domain would be mystore.com/fr-fr/ for the French language and mystore.com/fr-en/ for the English language version. In each market and language, “hreflang’ attributes will be added, indicating which market each site version is intended for.
Alternatively, you could opt for a separate, country-specific domain. In the above example, you might have mystore.com for your UK market and mystore.fr for your French market. The English language version of the French market would then use a sub-folder as mystore.fr/en/. Then, if you wanted to add a German market but don’t have a unique domain for this, you would use the primary domain and a sub-folder: mystore.com/de-de/ for a German store in German and mystore.com/de-en/ for a German store in English. Still with us? Good.
When it comes to design, you should consider potential differences in word or sentence length, as well as different character sets and related font sizes once translated. Consider designing with enough space to accommodate longer phrases or larger character sets, for example, the Cyrillic or Greek alphabets.
Then there’s the direction of the text. While the majority of languages are read left-to-right, there are others, such as Arabic, that read right-to-left. So, any call-to-action (CTA) or design elements that you might expect to be on the right in a left-to-right website may need to be moved over to the left of the page. You’re essentially flipping the whole website from left to right.
“Previously, it was quite difficult to style a page to work for both left to right and right to left languages, however with the release of CSS Logical Operators, this often complex issue was made a lot more simple and meant that you could support both text directions with minimal style changes. By replacing the common top/bottom/left/right values and using block-start/block-end/inline-start/inline-end, you can allow for both text directions. So, when a customer is shown the Arabic version of the site, we can simply use the direction attribute to transform the text to right-to-left.” - Billy Noyes, Front-end developer, We Make Websites.
Check out more of our international case studies.
There’s a lot to consider when going international with your online presence. Making sure that you reach your target audience in the right way is vital to turning those visitors into customers and those clicks into conversions.
Choosing the right translation method, the right tools, design, and store/URL setup are all key to ensuring that you are putting your best foot forward when it comes to engaging your customers across the globe. If you want to achieve international expansion, it’s crucial not to rush the process – reach out to our expert team to ensure you launch international stores successfully.
