Setup multilingual and multi-regional storefronts with domains and subdomains
In this guide you will learn how to setup your Hydrogen project for supporting multiregion and multilingual storefronts by using domains and subdomains. For example, say you have a storefront that should work in English (EN) and in non-regional French (FR) for different customers.
Set up the project to handle requests as follows:
RequirementsAnchor link to section titled "Requirements"
Step 1: Create a utility that reads requested hostAnchor link to section titled "Step 1: Create a utility that reads requested host"
The following is an example utility function with the following locales
Step 2: Add i18n to the storefront clientAnchor link to section titled "Step 2: Add i18n to the storefront client"
i18n to the result of the utility function that you used when creating the Hydrogen storefront client.
By doing this, you now have the locale available throughout the app for every storefront query.
Step 3: Add @inContext directive to your GraphQL queriesAnchor link to section titled "Step 3: Add @inContext directive to your GraphQL queries"
To support international pricing and languages in Storefront API, you need to pass the
$language with an
@inContext directive within any requests.
Update your GraphQL queries with
inContext directives to include
$language. Hydrogen automatically injects these parameters.
You don't need to manually provide query variables for
language. You can make these queries with
storefront.query in the data loader and you should see the right language and currencies for each request.
Hydrogen injects the locale parameters automatically to
storefront.query based on what was defined in
i18n when creating the client.
For example, if a request came from
hydrogen.fr, then the country
CA and language
FR are used as defined in the example utilities function above.
The Storefront API returns the correct currency and language if the store was set up in the Shopify admin.
Step 4: Make sure redirects are properly url encodedAnchor link to section titled "Step 4: 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.
- Create a country selector: Learn how to setup a country selector to allow users to choose their own country.