Internationalize routing
[Internationalization] helps merchants expand their business to a global audience by creating shopping experiences in local languages and currencies. This guide provides information on how to set up domains, subfolders, and redirects for internationalized routing.
Step 1: Set up domains and subdomains
Anchor link to section titled "Step 1: Set up domains and subdomains"From your Shopify admin, under Settings > Domains, update your domains and subdomains to target your custom storefront. Your primary domain is used for the default URL when customers visit your store.
For non-primary domains and subdomains where you want to host a localized experience, set the domain type to Routing.
Step 2: Set up subfolders
Anchor link to section titled "Step 2: Set up subfolders"Subfolder routes use the visitor's locale in the URL path. In Hydrogen, you can use the FileRoutes
component to prefix all file routes with a locale using the basePath
parameter, and to source the corresponding file routes:
Step 3: Set up redirects
Anchor link to section titled "Step 3: Set up redirects"After you've set up your routing strategies, you can create redirects based on your visitor's locale. You can trigger redirects manually. For example, a visitor changes their country using a dropdown menu, or automatically, based on a visitor's geolocation.
Shopify recommends manual redirects for customer privacy and SEO best practices. For example, reference the CountrySelector.client
component in the Hydrogen demo store.
If you're hosting your Hydrogen storefront on Oxygen, then you can access a visitor’s geolocation by using the request
object and retrieve it using request.headers.get()
:
View a full list of custom HTTP headers available from Oxygen.
If you're hosting your Hydrogen storefront on a platform that isn't Oxygen, then you can access the Accept-Language HTTP header as a hint to the visitor's country and language preference:
- Learn how to configure other localized experiences for merchants and customers using the GraphQL Storefront API.