Set the default locale
Internationalization with Shopify Markets helps merchants expand their business to a global audience by creating shopping experiences in local languages and currencies.
Each Hydrogen app should have a default language and country in order to receive the correct language and currency for your storefront.
This guide shows you how to add or update your custom storefront's default language.
Requirements
Anchor link to section titled "Requirements"- You've completed the Hydrogen getting started with a
Hello Worldexample project. - You can make queries to the Storefront API.
- You've setup your store's regions and languages using Shopify Markets.
Step 1: Set the default language and country
Anchor link to section titled "Step 1: Set the default language and country"In server.js, when creating the Hydrogen's storefront client, set the values for i18n's language and country, using the Storefront API's supported language and country codes.
This ensures that the default country and language are available as context for your Remix loaders.
The following example sets the language to non-regional English and the country to Canada:
Step 2: Update the HTML lang attribute
Anchor link to section titled "Step 2: Update the HTML lang attribute"The lang HTML attribute is used to identify the language to screen readers and search engines.
In this step you will update the HTML roots to match the language in server.js:
Step 3: Make sure redirects are properly url encoded
Anchor link to section titled "Step 3: Make sure redirects are properly url encoded"If you have multilingual handles for your product or collection, for example, products/スノーボード, make sure to encode url when making redirects.
- Setup multiregion and multilingual storefront with URL paths: Learn how to setup multiregion and multilingual storefront with URL paths to get the right language and currency.
- Setup multiregion and multilingual storefront with domains and subdomains: Learn how to setup multiregion and multilingual storefront with domains and subdomains to get the right language and currency.