Localization tab

The “Localization” tab provides widget text translations for all locales the shop has enabled. Storefront widget.js reads buyer’s locale and applies the matching translation.

Image: Localization tab overall (top pills + translation table)

Layout

• Top: language pills — each enabled language is one pill
• Add language: “Add language” button → opens picker filtered to shop’s enabled languages
• Active language pill highlighted

Translation table

Rows = each translatable field; columns = each language.

• Field label — common names:
  • Heading / Text label
  • Button / Coupon label
  • Badge title / subtitle
  • Popover title / description
  • URL field
• “Default” column — marks which language is the default (untranslated fields fall back here)
• Other language columns — fillable text inputs

Image: translation table example

Fallback behavior

Tip: “If a locale has no content, it falls back to the default language.”

Storefront widget.js:

• Reads window.Shopify.locale (strips region suffix, e.g. en-US → en)
• Looks up translation in config.locales[locale]
• Not found → falls back to default language

Auto-pruning stale translation keys

When a merchant deletes a component, pruneStaleLocales (commit f531283) auto-removes the corresponding translation keys from config.locales — preventing residue.

Field path format

Translation map keys use dotted paths:

"locales": {
  "ja": {
    "comp_abc123.label": "翻訳テキスト",
    "comp_abc123.popover.title": "ポップアップタイトル"
  }
}

Format: <componentId>.<fieldPath>. The runtime walks the content tree applying these per-component.