Customer account extensions i18n issue

Extensions
1

Customer account extensions do not render locales when the language is not in its market. So, we might be in the spanish market, which does not have the french language included, in the french language, and I am getting these errors:

image-20260318-135941 (1)
image-20260318-135941 (1)1562×947 81.4 KB

The error is consistent, since it does not only affect the extensions developed in-house, but also any third-party extension, as in the InPost extension depicted in the image.

If we add all languages to the market it works again, but this is going against the merchant’s business model.

There is an ongoing issue with previews and the cli on development environment for the customer accounts. Is it related?

2

Hi @Alvaro_Nter

This does look like a bug on our side - we’re investigating this now. I’ll post here when I have an update.

4

Any aupdate on this matter?

5

Hi @Alvaro_Nter

Unfortunately there’s no update on this as yet but I’ve reconnected with the folks working on this.

6

yeah mine is also buggy
when using the footer country selector
everything is not syncing
some are working and sometimes is not working

is it my shopify CLI?
i havent updated my CLI because the the newer ones make theme dev more buggy

7

Any updates on this its been 14d since the original post

8

Hi everyone,

@Liam-Shopify, We are encountering the same issue with MISSING KEY for locale "en", as you can see here.

I couldn’t replicate the issue locally; we have all the translation keys correctly, but it only happens in production.

The context where the merchant has only the Spanish as an active language, english isn’t enabled on their store.

Could you share any timeline for the progress and the root cause of this issue?

We really appreciate any info about it.

9

In our case, we encountered i18n issues within both the customer account and the checkout pages. Upon investigating our theme, we discovered that interactions with the Cart Ajax API had been implemented without locale-aware URLs.

Resolving this seems to have fixed the incorrect market/language attribution. This makes sense for the checkout—if the cart contains conflicting signals regarding a product’s origin or the customer journey, the system defaults. However, it remains a bit less clear why this specific fix also resolved the issues within the customer accounts.

10

its not just this its also in you address form

the error fields are fixed for some reason

12

@Liam-Shopify Any update on this?
This is one of the parts that is blocking as to transition to the new customer account.

13

@0_0 I have also struggled with this and I have found a workaround for the extensions I have built myself. Since this seems to be a bug in the translate function, I have just built my own:

Create a LocaleHelper.ts file in the src folder of your extension with this code, adjust the locale imports and default locale to your needs:

import en from '../locales/en.default.json';
import de from '../locales/de.json';
import fr from '../locales/fr.json';
import it from '../locales/it.json';
import nl from '../locales/nl.json';
import pl from '../locales/pl.json';

const LOCALES = { de, en, fr, it, nl, pl };

export function translate(locale: string, key: string): string {
  const language = getLanguage(locale);
  const localeData = LOCALES[language];

  return (localeData as Record<string, string>)[key]
    ?? (en as Record<string, string>)[key]
    ?? key;
}

Then import the translate function from this file in your extension and use it by passing the current locale and the translation-key for the text you want to translate:

import { translate } from './LocaleHelper';

...

function Extension() {
  const locale = shopify.localization.language.value.isoCode;

  ...

  return (
    <s-text>{translate(locale, [translation-key])</s-text>
  );
}

Keep in mind this does not work with dynamic placeholders out of the box. But you could chain a string replace function to the translate function call to do the replacement of the placeholder manually.

For example:

en.default.json

{
  "title": "Product details for {productTitle}"
}

translate(locale, "title").replace('{productTitle}', product.title);

I hope this helps! :slight_smile:

14

@felix-wiethoelter Thank you for sharing!
One problem still is the menu which is buggy as well, I can create a menu extension but that would mess up the layout


15

@0_0 Yeah you are right, this won’t help for the navigation, it is unfortunately also suffering from this issue. :frowning: