Auto detect user locale and change currency

Hydrogen and Storefront APIs
,
1

Hi,

I would like to display currency rate based on user’s locale. Basically whenever user comes to a store then user locale should be auto detect and based on that the currency should be change (without displaying dropdown). Is that anything we can achieve in hydrogen storefront?

Any help will be appreciated.

Thanks.

2

Am I correct in understanding the following two points?

  1. Does “no dropdown” mean “no explicit language specified by the customer”?

  2. Does your question mean “I want to use the exchange rate officially used by Shopify”?

If so, you can somehow determine the country from the customer’s IP address and pass it to @inContext in the storefront api.

If you want to get the customer’s IP on the server side of Hydrogen, you can get oxygen-buyer-ip from headers.

If you want to try this out, it’s probably easiest to do it in the following order:

1. First, use the following storefront-api query to check the effect of @inContext.

For “country” and “language”, specify a country other than the shop currency.
I set my shop currency to Japanese Yen, so I set it to US Dollars.

query GetProductPrice @inContext(country: US, language: EN) {
  product(id: "gid://shopify/Product/9531346420008") {
    title
    priceRange {
      minVariantPrice {
        amount
        currencyCode
      }
      maxVariantPrice {
        amount
        currencyCode
      }
    }
  }
}

2. (If the result of 1 is the same as the shop currency)

Set the “Local currency display settings” in the shop admin screen.
https://help.shopify.com/en/manual/international/pricing/set-up-local-currencies
If you run the storefront api query again, the currency included in the results should have changed.

3. Use @inContext from Hydrogen

Probably, the createHydrogenContext function is provided so that the same country context is used for all storefront-api queries used on the shop.

If you created a project with npm create @shopify/hydrogen@latest, createHydrogenContext is used in the app/lib/context.ts file, with i18n as an argument.

Changing the value of this i18n argument will also change the display currency.

Therefore, I think you can achieve your goal by passing the country context obtained from the customer IP address to this argument.

However, I’m not absolutely confident that this is correct, so I would like to hear the correct answer from the Shopify team as well.