<shopify-account> lowercases locale region subtag in auth redirect, breaking hosted Customer Account page language

Authentication & Access
1

The <shopify-account> web component redirects to the hosted Customer Account auth page with a lowercased region subtag in the locale parameter (e.g., locale=zh-cn instead of locale=zh-CN). The hosted auth page matches this parameter case-sensitively against its supported locale list, so the lowercased value fails to match and the page falls back to the default language.

The same locale is passed correctly (zh-CN) when the classic routes.account_login_url is used in the same storefront, so the bug appears to be specific to <shopify-account>.

In the same storefront page render, on the same market with zh-CN active:

Liquid output (server-side) is correct:

liquid

{{ request.locale.iso_code }}
→ zh-CN  ✅

The classic account link redirects with the correct locale:

html

<a href="{{ routes.account_login_url }}">Login</a>

Resulting redirect:

https://shopify.com/authentication/70575325345/code?...&locale=zh-CN&region_country=HK  ✅

But <shopify-account> redirects with the locale lowercased:

liquid

<shopify-account menu="customer-login-menu">
  <span slot="signed-out-avatar" class="header__icon header__icon--account">
    {% render 'icon-account' %}
  </span>
</shopify-account>

After clicking the avatar and submitting an email, the redirect chain ends at:

https://shopify.com/authentication/70575325345/code?...&locale=zh-cn&region_country=HK  ❌
2

Hey @HelenaL - thanks for flagging this and for the repro

This does look like something worth digging into on our end. From what you shared, the key difference seems to be that routes.account_login_url is preserving zh-CN, while the <shopify-account> flow is ending up with locale=zh-cn before it reaches the hosted Customer Account auth page.

A couple details would help narrow down exactly where that value is being transformed:

  • Could you share the rendered <shopify-store> / <shopify-account> markup from the browser inspector? I’m mainly looking for any language and country attributes, and whether the language is present as zh-CN, ZH_CN, or something else.
  • Could you also share a redacted final auth URL showing just the locale=... and region_country=... values?
  • If it’s easy to test, does forcing the component language to ZH_CN change the redirect back to locale=zh-CN?

For now, using routes.account_login_url for affected regional locales seems like the best workaround, since that path is preserving the locale correctly in your repro.

Hope to hear from you soon - happy to look into this

4

Hi @Alan_G ,

I’m also encountering this problem. In my case, my store’s base language is zh-TW.

<shopify-store store-domain="https://www.xxxxxx.com" country="HK" language="zh-TW"></shopify-store>
<shopify-account class="header__account color-scheme-1" menu="customer-account-main-menu">
  XXXX
</shopify-account>

I think there are 2 fixes that can be done here:
1, the web component should redirect to the locale with the right case
2, more importantly, the ?locale= parameter in customer account extensions should be case-insensitive anyway. When we develop the extension in Shopify CLI, we cannot create both zh-tw.json and zh-TW.json because locale should be case-insensitive.

5

Hey @michael-w - thanks for adding this, that zh-TW example is helpful.

I’m going to look into this on our end. For now, using routes.account_login_url is still the best workaround for affected regional locales since that path seems to preserve the locale casing correctly.

I’ll loop back here when I have an update.