--- title: Set the default locale description: Learn how to set your Hydrogen storefront's default language and country. source_url: html: >- https://shopify.dev/docs/storefronts/headless/hydrogen/markets/default-locale md: >- https://shopify.dev/docs/storefronts/headless/hydrogen/markets/default-locale.md --- ExpandOn this page * [Requirements](https://shopify.dev/docs/storefronts/headless/hydrogen/markets/default-locale.md#requirements) * [Step 1: Set the default language and country](https://shopify.dev/docs/storefronts/headless/hydrogen/markets/default-locale.md#step-1-set-the-default-language-and-country) * [Step 2: Update the HTML lang attribute](https://shopify.dev/docs/storefronts/headless/hydrogen/markets/default-locale.md#step-2-update-the-html-lang-attribute) * [Step 3: Make sure redirects are properly url encoded](https://shopify.dev/docs/storefronts/headless/hydrogen/markets/default-locale.md#step-3-make-sure-redirects-are-properly-url-encoded) * [Next steps](https://shopify.dev/docs/storefronts/headless/hydrogen/markets/default-locale.md#next-steps) # Set the default locale [Internationalization with Shopify Markets](https://shopify.dev/docs/storefronts/headless/hydrogen/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 * You've completed the [Hydrogen getting started](https://shopify.dev/docs/storefronts/headless/hydrogen/getting-started) with a `Hello World` example project. * You can make [queries to the Storefront API](https://shopify.dev/docs/storefronts/headless/hydrogen/data-fetching). * You've setup your store's regions and languages using [Shopify Markets](https://help.shopify.com/en/manual/markets). *** ## 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](https://shopify.dev/docs/api/storefront/latest/enums/LanguageCode) and [country](https://shopify.dev/docs/api/storefront/latest/enums/CountryCode) codes. This ensures that the default `country` and `language` are available as context for your React Router loaders. The following example sets the language to non-regional English and the country to Canada: ## /server ## /server.js ```js ... const {storefront} = createStorefrontClient({ ... // Update your default language and country code i18n: {language: 'EN', country: 'CA'}, ... }); ``` ```ts ... const {storefront} = createStorefrontClient({ ... // Update your default language and country code i18n: {language: 'EN', country: 'CA'}, ... }); ``` ##### JavaScript ``` ... const {storefront} = createStorefrontClient({ ... // Update your default language and country code i18n: {language: 'EN', country: 'CA'}, ... }); ``` ##### TypeScript ``` ... const {storefront} = createStorefrontClient({ ... // Update your default language and country code i18n: {language: 'EN', country: 'CA'}, ... }); ``` *** ## 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`: ## /app/root ## /app/root.jsx ```jsx export default function App() { return ( // Update your default lang attribute ... ); } ``` ```tsx export default function App() { return ( // Update your default lang attribute ... ); } ``` ##### JavaScript ``` export default function App() { return ( // Update your default lang attribute ... ); } ``` ##### TypeScript ``` export default function App() { return ( // Update your default lang attribute ... ); } ``` ## Add to CatchBoundary component if exists ## /app/root.jsx ```jsx export function CatchBoundary() { return ( ... ); } ``` ```tsx export function CatchBoundary() { return ( ... ); } ``` ##### JavaScript ``` export function CatchBoundary() { return ( ... ); } ``` ##### TypeScript ``` export function CatchBoundary() { return ( ... ); } ``` ## Add to ErrorBoundary component if exists ## /app/root.jsx ```jsx export ErrorBoundary({error}: {error: Error}) { return ( ... ); } ``` ```tsx export ErrorBoundary({error}: {error: Error}) { return ( ... ); } ``` ##### JavaScript ``` export ErrorBoundary({error}: {error: Error}) { return ( ... ); } ``` ##### TypeScript ``` export ErrorBoundary({error}: {error: Error}) { return ( ... ); } ``` *** ## 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. ## Link ## /app/routes/($locale).products.$productHandle.js ```js export async function loader({params, request, context}) { const {productHandle} = params; // productHandle = 'スノーボード' ... if (noSelectedProductVariant) { // Use URL to prevent accidental double url encoding const newUrl = new URL( `/products/${productHandle}?${firstVariantSearchParams.toString()}`, 'http://example.com' // Any domain to satisfy the URL api ); // Redirect to '/products/%E3%82%B9%E3%83%8E%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89?Size=154cm&Color=Syntax' throw redirect(newUrl.pathname + newUrl.search, 302); } ... ``` ```ts export async function loader({params, request, context}: LoaderArgs) { const {productHandle} = params; // productHandle = 'スノーボード' ... if (noSelectedProductVariant) { // Use URL to prevent accidental double url encoding const newUrl = new URL( `/products/${productHandle}?${firstVariantSearchParams.toString()}`, 'http://example.com' // Any domain to satisfy the URL api ); // Redirect to '/products/%E3%82%B9%E3%83%8E%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89?Size=154cm&Color=Syntax' throw redirect(newUrl.pathname + newUrl.search, 302); } ... ``` ##### JavaScript ``` export async function loader({params, request, context}) { const {productHandle} = params; // productHandle = 'スノーボード' ... if (noSelectedProductVariant) { // Use URL to prevent accidental double url encoding const newUrl = new URL( `/products/${productHandle}?${firstVariantSearchParams.toString()}`, 'http://example.com' // Any domain to satisfy the URL api ); // Redirect to '/products/%E3%82%B9%E3%83%8E%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89?Size=154cm&Color=Syntax' throw redirect(newUrl.pathname + newUrl.search, 302); } ... ``` ##### TypeScript ``` export async function loader({params, request, context}: LoaderArgs) { const {productHandle} = params; // productHandle = 'スノーボード' ... if (noSelectedProductVariant) { // Use URL to prevent accidental double url encoding const newUrl = new URL( `/products/${productHandle}?${firstVariantSearchParams.toString()}`, 'http://example.com' // Any domain to satisfy the URL api ); // Redirect to '/products/%E3%82%B9%E3%83%8E%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89?Size=154cm&Color=Syntax' throw redirect(newUrl.pathname + newUrl.search, 302); } ... ``` *** ## Next steps * [Setup multiregion and multilingual storefront with URL paths](https://shopify.dev/docs/storefronts/headless/hydrogen/markets/multiple-languages-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](https://shopify.dev/docs/storefronts/headless/hydrogen/markets/multiple-languages-domains): Learn how to setup multiregion and multilingual storefront with domains and subdomains to get the right language and currency. *** * [Requirements](https://shopify.dev/docs/storefronts/headless/hydrogen/markets/default-locale.md#requirements) * [Step 1: Set the default language and country](https://shopify.dev/docs/storefronts/headless/hydrogen/markets/default-locale.md#step-1-set-the-default-language-and-country) * [Step 2: Update the HTML lang attribute](https://shopify.dev/docs/storefronts/headless/hydrogen/markets/default-locale.md#step-2-update-the-html-lang-attribute) * [Step 3: Make sure redirects are properly url encoded](https://shopify.dev/docs/storefronts/headless/hydrogen/markets/default-locale.md#step-3-make-sure-redirects-are-properly-url-encoded) * [Next steps](https://shopify.dev/docs/storefronts/headless/hydrogen/markets/default-locale.md#next-steps)