Support multiple currencies and languages

Merchants can enable selling in multiple currencies with Shopify Payments, and multiple languages. This means that customers can browse the shop, and checkout, in their preferred currency and/or language.

This preference can be set in three ways:

In addition to allowing customers to choose their preferred country and/or language, you should also consider the following:

Geolocation

Merchants can choose to use the Geolocation app which will prompt customers to select their preferred language and currency.

The country selector

You can build a country selector to allow customers to manually choose their preferred currency. If the currently selected language is not supported by the selected country, it will be updated to the default language for that country.

The selector needs to be placed inside the localization form, which can be included with the Liquid form tag and accompanying 'localization' parameter. It also needs to have the attribute name="country_code", and its options will be each of the shop's enabled countries.

The shop's enabled countries are accessible through the available_countries attribute of the localization object, and the currently selected country is accessible through the country attribute.

For example:

To learn more about best practices around styling and placement of country selectors, refer to UX guidelines.

The language selector

You can build a language selector to allow customers to manually choose their preferred language.

The selector needs to be placed inside the localization form, which can be included with the Liquid form tag and accompanying 'localization' parameter. It also needs to have the attribute name="language_code", and its options will be each available language for the selected country.

The available languages are accessible through the available_languages attribute of the localization object, and the currently selected language is accessible through the language attribute.

For example:

To learn more about best practices around styling and placement of language selectors, refer to UX guidelines.

JavaScript submission of the localization form

Instead of including a submit button with your country or language selector, you can set up JavaScript to automatically submit the form when a new selection is made.

For example:

Locale-aware URLs

When an additional locale (language) is published on a domain, Shopify automatically creates a URL path for it. For example, if a shop's primary URL is shop.com, and a french (fr) locale is published on that domain, then the URL shop.com/fr is automatically created.

Given this possible dynamic change in URL structure, you should avoid hardcoding URLs, and instead use the following to build URLs with Liquid:

  • The url attribute of any applicable Liquid objects
  • The routes object

For example, if a merchant has English and French locales, then the cart URL could be /cart or /fr/cart, respectively. Using the cart_url attribute of the routes object would output the correct URL path based on the currently selected locale.

Search engine optimization

In addition to providing options for customers to select a country and/or language, you also need to ensure that search engines return localized content and prices for customers.

Shopify automatically includes hreflang tags through the content_for_header object, and you can return localized prices by including, or extending, Structured data in your theme.

Structured data

When outputting structured data for products, you need to ensure that the priceCurrency property is set to reflect the cart currency, rather than the shop's currency.

For example: