[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 subdomainsAnchor 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 subfoldersAnchor 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 redirectsAnchor 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
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.