Localize widget interface text without confusing it with editor content
Interface text belongs in the application's translation catalog; author-entered widget content belongs in widget configuration. Keep both visible in preview and storefront tests.
In this guide
Separate two kinds of text
A widget heading entered by an editor is content. A fixed button label such as Read more is interface text. Translating content by hardcoding it in a catalog prevents editors from changing it; translating interface text through widget configuration makes locale coverage inconsistent.
resourceCard.ts typescript
type Translate = (key: string) => string;
type ResourceCardProps = { heading: string; href: string; t: Translate };
export function resourceCardLabel({ heading, href, t }: ResourceCardProps) {
return { heading, href, actionLabel: t('resourceCard.readMore') };
}
// en-US: resourceCard.readMore = 'Read more'
// fr-CA: resourceCard.readMore = 'Lire la suite'Keep catalog scope explicit
Identify whether Page Builder preview and Webstore load the same catalog or separate application catalogs. Add the key to every required catalog and decide how a missing key should appear during development. A preview pass alone is not evidence that storefront users receive the text.
Verify both runtimes
Test a configured heading and the fixed action label in at least two locales, in Page Builder preview and storefront rendering. Check narrow layouts, keyboard activation, a missing translation key, and a saved configuration reload. State which results were actually exercised.
References and further reading
Bring your next engineering question.
Need a Page Builder widget reviewed across preview and storefront?
Independent guidance from GCG. Znode is a trademark of its owner. Examples use fictional data and are not official platform documentation. Suggest a correction.