---
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/legacy/hydrogen/markets/default-locale
  md: >-
    https://shopify.dev/docs/storefronts/headless/legacy/hydrogen/markets/default-locale.md
api_name: hydrogen
---

Legacy Hydrogen

These pages refer to Hydrogen versions 2026-04 and earlier. For versions 2026-10 and later, refer to the latest [Hydrogen docs](https://shopify.dev/docs/storefronts/hydrogen). If you're not using the latest version of Hydrogen, then we recommend that you migrate your storefront. To learn more, refer to [Migrate to the latest version of Hydrogen](https://shopify.dev/docs/storefronts/hydrogen/migrate).

# Set the default locale

[Internationalization with Shopify Markets](https://shopify.dev/docs/storefronts/headless/legacy/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/legacy/hydrogen/getting-started) with a `Hello World` example project.
* You can make [queries to the Storefront API](https://shopify.dev/docs/storefronts/headless/legacy/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

##### JavaScript

```js
...
const {storefront} = createStorefrontClient({
  ...
  // Update your default language and country code
  i18n: {language: 'EN', country: 'CA'},
  ...
});
```

##### TypeScript

```ts
...
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

##### JavaScript

```jsx
export default function App() {
  return (
    // Update your default lang attribute
    <html lang="EN">
      ...
    </html>
  );
}
```

##### TypeScript

```tsx
export default function App() {
  return (
    // Update your default lang attribute
    <html lang="EN">
      ...
    </html>
  );
}
```

## Add to CatchBoundary component if exists

## /app/root.jsx

##### JavaScript

```jsx
export function CatchBoundary() {
  return (
    <html lang="EN">
      ...
    </html>
  );
}
```

##### TypeScript

```tsx
export function CatchBoundary() {
  return (
    <html lang="EN">
      ...
    </html>
  );
}
```

## Add to ErrorBoundary component if exists

## /app/root.jsx

##### JavaScript

```jsx
export ErrorBoundary({error}: {error: Error}) {
  return (
    <html lang="EN">
      ...
    </html>
  );
}
```

##### TypeScript

```tsx
export ErrorBoundary({error}: {error: Error}) {
  return (
    <html lang="EN">
      ...
    </html>
  );
}
```

***

## 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

##### JavaScript

```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);
  }

  ...
```

##### TypeScript

```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);
  }

  ...
```

***

## Next steps

* [Setup multiregion and multilingual storefront with URL paths](https://shopify.dev/docs/storefronts/headless/legacy/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/legacy/hydrogen/markets/multiple-languages-domains): Learn how to setup multiregion and multilingual storefront with domains and subdomains to get the right language and currency.

***