How to Add Localization & Translation to Your Shopify Store

It’s true that large parts of the world speak English and are comfortable with viewing Shopify stores in English despite it not being their native language. However, research shows that the majority of users are more likely to purchase products from websites with content in their own language. If you only provide English content and pricing on your Shopify store, you are potentially missing out on a lot of sales from overseas customers.

In this article we will explore how to make your site international by providing content in multiple different languages, using only the free tools that Shopify provides.

Before we get started, there are a few requirements that your Shopify store needs to meet. Firstly, you need to use the basic Shopify plan or higher. Also your theme needs to support multilingual features by using the translate filter where content is rendered. Your theme may come with a language selector included but if not then don't worry because we will cover the steps to add this.

The first thing to do is install the Shopify Translate & Adapt app. This is a great app that takes care of translating all content on your store to the languages that you want to offer to your customers.

For convenience, the app is automatically installed for you when you add a new language to your store.

Once installed, you have the option of entering manual translations or allowing the app to automatically translate your content. Your mileage will vary here but for more accurate translations it is advisable to go for the manual option.

Another important caveat is that Shopify does not automatically translate your store policy pages and you should consult a professional translator to ensure the translated content for these is accurate in each language.

Here is a simple example showing a page translation

As mentioned above, in order to display the translated content you need to ensure that your theme uses the translate filter. For example

<h1>{{ page.title | t }}</h1>

This will allow your content to render in the language for the current selected country. If you don’t use the filter then the content will always be rendered in English even if you have selected another country.

Some Shopify themes come with a country selector as part of the theme, so depending on the theme you use you might not need to do anything further. But if you are using a custom theme or a theme without a country selector, then here is what you need to do.

You need to add a localization form using code like this

{% if localization.available_countries.size > 1 %}
<localization-form>
{% form 'localization' %}
<div class="disclosure">
<button type="button" class="disclosure__button" aria-expanded="false" aria-controls="CountryList">
{{ localization.country.name }} ({{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }})

<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
</svg>
</button>

<ul id="CountryList" role="list" class="disclosure__list" hidden>
{% for country in localization.available_countries %}
<li class="disclosure__item" tabindex="-1">
<a href="#"{% if country.iso_code == localization.country.iso_code %} aria-current="true"{% endif %} data-value="{{ country.iso_code }}">
{{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }})
</a>
</li>
{% endfor %}
</ul>

<input type="hidden" name="country_code" value="{{ localization.country.iso_code }}">
</div>
{% endform %}
</localization-form>
{% endif %}

This adds a country selector

Web form screenshot showing "Country" field set to "United States (USD $)".

The final thing needed is some JavaScript to set the chosen language when the user selects another language from the selector.

class LocalizationForm extends HTMLElement {
constructor() {
super();
this.elements = {
input: this.querySelector('input[name="language_code"], input[name="country_code"]'),
button: this.querySelector('button'),
panel: this.querySelector('ul'),
};
this.elements.button.addEventListener('click', this.openSelector.bind(this));
this.elements.button.addEventListener('focusout', this.closeSelector.bind(this));
this.addEventListener('keyup', this.onContainerKeyUp.bind(this));

this.querySelectorAll('a').forEach(item => item.addEventListener('click', this.onItemClick.bind(this)));
}

hidePanel() {
this.elements.button.setAttribute('aria-expanded', 'false');
this.elements.panel.setAttribute('hidden', true);
}

onContainerKeyUp(event) {
if (event.code.toUpperCase() !== 'ESCAPE') return;

this.hidePanel();
this.elements.button.focus();
}

onItemClick(event) {
event.preventDefault();
const form = this.querySelector('form');
this.elements.input.value = event.currentTarget.dataset.value;
if (form) form.submit();
}

openSelector() {
this.elements.button.focus();
this.elements.panel.toggleAttribute('hidden');
this.elements.button.setAttribute('aria-expanded', (this.elements.button.getAttribute('aria-expanded') === 'false').toString());
}

closeSelector(event) {
const shouldClose = event.relatedTarget && event.relatedTarget.nodeName === 'BUTTON';
if (event.relatedTarget === null || shouldClose) {
this.hidePanel();
}
}
}

customElements.define('localization-form', LocalizationForm);

When the user chooses a country, Shopify will change the language to the country’s default language if the currently selected language is not supported by that country. For maximum flexibility we recommend also adding a language selector to allow the user to choose the language they want.

Stay tuned for part two of this blog post coming soon, to see how we do that and more.