• Requirements
  • Step 1: Create a utility function that reads the request

Localization detection

In this guide you'll learn how use headers, cookies or URL search parameters for approximating a user's location.

Caution

While it's possible to detect an approximation of the user's locale by reading the header, cookies or URL search params. Shopify only recommends this to improve the experience of the user. Learn more about using header, cookies and URL search params in the overview.

A good example of detecting localization is to show a banner to asking the user if they want to switch country.

A bad example of localization detection is when the user gets automatically redirected.

Other drawbacks of this approach are that page caching ignores locale cookies, headers and URL search params. SEO bots tend to origin from the US, don't have cookies and will not change their accept-language headers.

Requirements

Anchor link to section titled "Requirements"
  • You've completed the Hydrogen getting started guide.
  • You've setup your store's region regions and languages using Shopify Markets.
  • You're familiar with using the Storefront API with Shopify Markets.

Step 1: Create a utility function that reads the request

Anchor link to section titled "Step 1: Create a utility function that reads the request"

Create a utility function that reads the request.

Tip

You can use the /app/lib/utils.ts file in the Hydrogen demo store as a point of reference.

The following is an example of extracting the accept-language header from the user request:

You can use this utility function to trigger analytics or for reading this approximate locale.

On this page

  • Requirements
  • Step 1: Create a utility function that reads the request