Skip to main content

Set the default locale

Internationalization with Shopify 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.

Anchor to RequirementsRequirements

Anchor to Step 1: Set the default language and countryStep 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 and country 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

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

Anchor to Step 2: Update the HTML lang attributeStep 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

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

Add to CatchBoundary component if exists

/app/root.jsx

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

Add to ErrorBoundary component if exists

/app/root.jsx

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

Anchor to Step 3: Make sure redirects are properly url encodedStep 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

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

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

...

Anchor to Next stepsNext steps

Was this page helpful?