I am struggling to replicate this, but my checkout ui extension gets the language of the customer, via useLanguage - this is then passed alongside some other parameters to my backend api to determine which content to show.
However, what I have noticed is that often customers who have a different language on their Shopify orders and customer records have come through as the default language of the store.
I’ve tried adding slight delays to ensure the value is correctly updated, but I still see customers who should have a different language coming through as the stores default language.
Anyone seen anything similar or have any guidance on how to get a reliable value from useLanguage?
Hi @Alex_Dover
You’re running into a real behavior difference here, not just a timing issue.
The key point: useLanguage returns the language of the checkout UI at the moment your extension renders, which is not guaranteed to be the same as:
- the “language” stored on the Customer record, or
- the “language” stored on the Order record in Admin.
Those Admin-side languages can be set or updated later by other processes, so it’s normal for them to differ from what your extension saw at checkout time. That’s why you’re sometimes seeing the store’s default language from useLanguage even when the customer record shows a different language.
Delays or timeouts don’t fix this, because useLanguage is already reactive and updates when the checkout language changes. The main pitfalls are: (1) firing your backend call only once on mount (so it always uses the initial language, often the default), and (2) expecting useLanguage to match a different “language” source (like a customer preference or order field) that’s not tied directly to the checkout UI. If you only call your backend once with useEffect(..., []), you’ll never see later language changes reflected in your API calls.
A more reliable pattern is to treat useLanguage().isoCode as the source of truth for the content language at checkout, and refetch or re-call your backend whenever it changes; for example, put language.isoCode in your effect’s dependency array so you fetch again when the buyer changes the checkout language. For debugging, log the language, checkout ID, and URL at the time of the request and compare that to the final order/customer language in Admin—you’ll likely see that the checkout really was in the store’s default language when your extension ran, or that the customer’s language was updated after checkout by some other system.
Hope this helps!
Thanks for replying, Liam.
It is a shame the value can’t be relied upon as such and there are so many factors seemingly impacting it. I appreciate their are systems in place behind the scenes so it isn’t always that simple, but we deal with the merchant who sees a locale/language on a customer or order and asks us why it was different on the checkout.
I could try refetching if the isoCode changes, but given in my case I’m trying to present a survey in a local language it also needs to be delivered in a timely manner to be effective.
For the moment, I have swapped to using a backend api call to fetch the customerLocale from the order and will use that, albeit that comes with challenges if the order isn’t yet in Shopify when the thank you page is viewed.