LocaleApi

Deprecated

Product subscription app extensions won't be supported as of August 10, 2026. You should migrate existing product subscription app extensions to purchase options extensions.

Access the merchant’s current locale (in IETF format) to internationalize your extension content.

import {extend, Text} from '@shopify/admin-ui-extensions';

extend('Admin::Product::SubscriptionPlan::Add', (root, api) => {

const {locale} = api;

const text = root.createText(`My current locale is: ${locale.initialValue}`);

locale.setOnChange((newLocale) => {

text.updateText(`My current locale is: ${newLocale}`);

});

root.appendChild(text);

root.mount();

});

import React from 'react';

import {extend, render, useLocale, Text} from '@shopify/admin-ui-extensions-react';

function App() {

const locale = useLocale();

return <Text>{`My current locale is: ${locale}`}</Text>;

}

extend(

'Admin::Product::SubscriptionPlan::Add',

render(() => <App />),

);

JavaScript

import {extend, Text} from '@shopify/admin-ui-extensions';

extend('Admin::Product::SubscriptionPlan::Add', (root, api) => {
  const {locale} = api;

  const text = root.createText(`My current locale is: ${locale.initialValue}`);

  locale.setOnChange((newLocale) => {
    text.updateText(`My current locale is: ${newLocale}`);
  });

  root.appendChild(text);
  root.mount();
});

React

import React from 'react';
import {extend, render, useLocale, Text} from '@shopify/admin-ui-extensions-react';

function App() {
  const locale = useLocale();

  return <Text>{`My current locale is: ${locale}`}</Text>;
}

extend(
  'Admin::Product::SubscriptionPlan::Add',
  render(() => <App />),
);

Anchor to PropsProps

optional = ?

Name	Type	Description
initialValue	`string`	IETF-formatted locale at time of page load
setOnChange	`(onChange: (locale: string) => void) => void`	Callback when user changes locale during runtime

Was this page helpful?