The Key Aspects to Consider When Building Multilingual Websites

For web developers, the word ‘multilingual’ could be a great synonym for ‘nightmare’. For many CMS tools, non-CMS languages, and frameworks—including Shopify—making multilingual websites is a pain point.

Thankfully, there are ways to overcome this challenge.

For the sake of clarity, this article is about multilingual stores, and not about managing independent stores for different countries. So, if you’re looking for stores with their own dedicated products, shipping methods, and payment gateways, then a multilingual website might not be the right solution for you.

But if you’re looking to display your clients' Shopify stores in more than one language, then this article is just what you need. For more tools to help your development process, check out our list of favorite Sublime text plugins, or learn more about building themes with Shopify Theme Kit.

You might also like: Help Global Merchants Create Local Solutions.

Why multilingual options are so important

Why should you care so much about building a multilingual Shopify store the right way?

First, you need to increase your visibility and attract as many visitors as possible. That's why being indexed by Google and other search engines is so crucial—and if you’re going global, being searchable in different languages is key.

Secondly, you want to turn all these potential customers into real purchasers and repeat business. That's why offering a seamless and optimized flow, from the landing page to the thank you page, in your customers’ language is so important.

The options for building a multilingual store

There have been a couple solutions over the years to building a multilingual store.

Option 1: Using a multilingual theme or making your theme multilingual

This has been one of the great solutions available over the past years. There are, however, some significant downsides:

• There are limited choices: few agencies develop multilingual themes, with Blackbelt Commerce being the most famous—though in 2016, they decided to stop multilingual themes and retired their famous Bilingual Theme
• It is very complex to manage different posts and pages
• There is an absence of email/checkout translations

Option 2: Using a multilingual app

Over the last few years, a lot of new app technology has been developed that has provided several options for translations. Being the co-founder of one of these apps, I am obviously biased, but I strongly believe having an app or service dedicated to one feature within a website is sometimes the right solution for specific needs.

The next step is to review the 3 key technical aspects to take into account when building a multilingual store.

You might also like: UI of the Future: Conversational Interfaces.

3 key technical aspects for multilingual Shopify stores

When you start looking for the best practices for multilingual stores you’ll find  nothing—okay, not nothing, but there are no common agreed-to and shared best practices.

So, when we started out our service and Shopify app in 2016, we collected info on all the main factors to take into consideration when building multilingual web applications. Here is what we consider as technical must-haves for qualified freelancers and web agencies building multilingual stores.

1. Multilingual SEO, matching Google best practices guidelines

Let’s start by what might be the most important aspect, especially for your clients: multilingual SEO. It’s nice to have a translated website, but if you can not be indexed in search engines such as Google, you’re leaving out a lot of value (especially if you’re committed and consistent in your SEO strategy).

When it comes to SEO, there is one source of excellent information: Google documentation. We went through their most helpful and relevant page to summarize the golden rules of multilingual SEO.

Use dedicated and unique URLS

Do use country-specific URLS (like mywebsite.fr for French for example), subdomains with gTLDS (like fr.mywebsite.com), or subdirectories with gTLDs (like mywebsite.com/fr) for each version of a page (visit the Translations category in the Shopify App Store to browse apps capable of helping with this).

Don’t use URL parameters

Never use URL parameters like mywebsite.com?lang=fr or even worse, the same URL for the different languages. It’s clearly not recommended by Google and will negatively impact the website’s SEO.

Do tell Google you have different versions of a page

Do use a sitemap or hreflang tags to facilitate the search engine crawlers’ job. This way, you make sure they’ll be aware of the existence of all your pages in your different languages, and have an easy access to them.

Don’t assume search engines will behave like a regular visitor. They’re bots—smart bots yes, but they still need to know that your pages are available in different languages to visit and index them. Below is an example of the tags you should use to help Google index your site.

Do include translations in your source code

Do make sure your translations are included in your source code, i.e. on server side. It can be only on the server side, or both on server and client side. Otherwise, Google and other search engines will crawl your page and see original content under a dedicated URL for another language.

This could have 2 negative impacts:

• Content in search results will appear in the original language
• It could generate duplicate content, as the same content would be crawled and indexed under 2 different URLs

Don’t assume that search engines can crawl Javascript. For now, tests show that even if Google makes significant efforts to improve this, it’s still not as good as server-side content. Generally, it’s only possible if you use a pre-rendering solution, usually provided by an external service.

So when you’re looking for multilingual solutions, carefully review the points described above and make sure they’re supported and included in the features. Avoid poor solutions, such as only Javascript-based ones, unless you do not care about SEO. And speaking of, learn what a canonical URL is and why they're so important.

Below is an example of how to include translations (in this case, to English) in the source code.

Multilingualism will also impact the visitor’s journey, so you should also care about the overall experience offered on your multilingual website.

2. Optimizing user experience

User experience is key for online businesses. Regardless if you’re selling software or hardware products, you have to master the journey of your visitors to avoid losing valuable sales opportunities.

Multilingual websites are no exception. There are 3 main principles to bear in mind.

A language button

A customizable language button that matches the website’s look and feel will help buyers navigate the site.

Do make sure your language button can be noticed in a few seconds by your visitors. You can put it at the top of your website, or create a sticky button that remains in the same position as users navigate. Add your own final touches to make sure it fits with your website design.

There are locations on your website where you should not put a language button, such as areas where you have expandable elements such as a a live chat window or a helpdesk beacon. The language button might get hidden behind it, and it would be impossible for visitors to know there are different language versions of the store available. Ultimately, they could just leave your website and not continue the visit.

A redirect option

Set up a language auto redirection feature to automatically display the visitor’s language, minimizing the required actions for your visitors. The less your visitors have to do to get the information they need, the more they will stay on your website—remember, most visitors stay less than 30 seconds on a website. Even if you selected a clear and visible language button, it’s recommended that you also use this option.

Don’t set up your automatic language redirection based on IP geo localization. IP geolocalization tracker tools are not 100 percent reliable. Also, a country is not a language—think about Switzerland, Canada, or tourists. The best way to properly used the redirection feature is to base it on the visitor’s preferred language in their browser. As it’s been setup by users, it’s more trustworthy.

Maintaining the selected language

As mentioned earlier, the less your visitors have to do, the more likely they’ll stay on your website. Once a visitor has selected a language, make sure it remains the same during their whole visit.

When visitors go from the top of your acquisition funnel to the very bottom, the selected language has to be the same. It’s even more crucial for online merchants, as they need to build trust with visitors. If the language is changing between pages, it might make them drop before the payment page.

Be sure you don’t mix languages on your default language version. For example, if you have most of your pages in English, but some products in English and French, but your cart and payment pages are only available in English, that’s a great way to confuse visitors and get a poor user experience.

The language button visibility, the auto-redirection, and the language consistency are the essentials of an optimized user experience on multilingual websites. But you can go even further.

3. Extra steps for a complete experience

There are 2 extra steps you should consider if you want to fine tune and offer the best experience possible. The underlying idea is to be as professional as possible in all your languages.

Emails

Emails are a key component of any ecommerce website. They are an affordable and efficient marketing and communications tool. Main applications include newsletters, abandoned cart notifications, and confirmation emails.

If you run a website available in different languages, your emails should also be written in those languages. So therefore, the email sendings command has to match the visitors’ language.

For example, if you want to translate order confirmation emails, you can make it possible with a script that you insert into your Shopify Admin settings.

When we code this, we use a script to support different languages, using attributes.lang:

{% case attributes.lang %}
 {% when 'de' %}
    GERMAN TEXT
 {% else %}
    ENGLISH TEXT
 {% endcase %}

 You can read more about how we structure multilingual email order confirmations here.

There are a few tips we recommend to follow when using translated email scripts:

• Adapt the text and the closing/greetings formulas to your visitors culture: in Asia for example, Koreans will sometimes end an email with “The End”. Also the Japanese apologize for making requests (with sentences like "Sorry to interrupt you while you are busy" or "I'm terribly sorry for the inconvenience, but thank you...").
• Don’t forget to also translate the subject of the email.
• Add a local name as a signature, unless you already used a name that speaks for everyone.

All these small tips will help you build trust with your customers, favoring repeat business, which is key for any sustainable growth.

Invoices

Invoices are more important for B2B businesses than for B2C ones, but they are often legally required by bookkeepers. Plus, they’re the final step of the purchase, and so the last part of the user experience.

While other key components of invoicing, such as multi-currency and country-specific tax, can be managed with apps such as Sufio, clients are also expecting to get their invoice in the same language as their purchase.

You might also like: How Cutting out Jargon can Help you Achieve Clear Communication.

To review

Even if building and managing a multilingual online store is not naturally easy, on a pure development standpoint, there are solutions to handle it. You can either build your own multilingual theme, or buy one—but remember to make sure it’s well supported.

You can also find multilingual apps on the official Shopify App store.

To help you select the right tool, make sure your choice meets these key requirements:

• Multilingual SEO friendly, applying Google best practices
• Optimized user experience, offering the same level of experience in all your languages

Applying the key technical requirements is a must-have if you want to fully leverage all the benefits of multilingualism.