shopify-app-i18n_skill

This skill guides adding multi-language support to Shopify Apps using i18next, including setup, translation files, and admin context for broad reach.

HTML

6

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill toilahuongg/shopify-agents-kit --skill shopify-app-i18n

SKILL.md3.1 KB

Overview

This skill guides adding multi-language support to Shopify Apps using i18next, react-i18next, and remix-i18next. It focuses on practical setup, where to store localization files, and how to detect and apply the Shopify Admin language. The guidance covers both server and client integration and notes special handling for app extensions.

How this skill works

Set up i18next on both server and client, using remix-i18next to detect locale from requests and sync Remix with i18next. Store JSON translation files under public/locales with one folder per language and namespace files (for example common.json). Use react-i18next hooks in components to load translations and render localized content. Extensions (theme or checkout) require their own locales folder inside the extension directory.

When to use it

You want your Shopify App to support multiple merchant languages and locales.
You need server-side locale detection to render correct lang/dir attributes and initial content.
You are building a Remix-based app and need smooth language switching and SSR-friendly translations.
You must localize admin-facing UI and also separate extension translations for Theme/Checkout extensions.

Best practices

Keep translation keys small and namespaced (e.g., common.json -> dashboard.title) for reuse and clarity.
Store all translations in public/locales/{{lng}}/{{ns}}.json and load via i18next backend to support SSR.
Detect Shopify Admin locale from request query (?locale=fr-FR) or headers; prefer the Admin UI locale when available.
Sync server-detected locale with client using useChangeLanguage or equivalent to avoid flicker.
Manage extension translations separately in extensions/<ext>/locales to avoid conflicts with the main app.

Example use cases

Render localized dashboard titles and strings using useTranslation('common') in React components.
Detect merchant locale from incoming Remix requests and set <html lang> and dir attributes accordingly.
Provide fallbacks and supported languages via i18next config so untranslatable keys default safely.
Include separate locale bundles for a Theme App Extension under extensions/my-ext/locales/en.default.json.

FAQ

Place them under public/locales/{{lng}}/{{ns}}.json for the Remix app; extensions must use their own locales folder inside the extension directory.

How do I detect the Shopify Admin language?

remix-i18next can detect locale from request headers or query params (Shopify sends ?locale=xx-XX); prefer the Admin UI locale or use the Admin API if needed.