Menu
Guide for adding Multi-language support to Shopify Apps using i18next. Covers setup, localization files, and Admin context.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Create, critique, regenerate, or validate Shopify App Store app logos/icons using Shopify's current app icon guidance. Use when the user asks for a Shopify app logo, Shopify App Store icon, app listing icon, Dev Dashboard app icon, branded square logo, logo prompt, icon validation, or review-safe visual direction for Shopify app submission.
Create, critique, or regenerate Shopify App Store feature images for app listings using Shopify's current App Store media guidance and the $imagegen skill for actual image generation/editing. Use when the user asks for a Shopify app feature image, App Store listing hero image, marketing image, listing media, image prompt, image validation, or review-safe visual direction for Shopify app submission.
Create comprehensive Shopify App Store listing content following official best practices. Use when users need to write or improve their app listing for the Shopify App Store, including app introduction, app details, features, app card subtitle, search terms, SEO content (title tag, meta description), and testing instructions. Also applicable when preparing an app submission for Shopify review.
Generate and maintain changelogs following Keep a Changelog format. Analyzes git commits, categorizes changes, and produces well-structured release notes.
Guide for implementing Shopify's Billing API in Remix apps using @shopify/shopify-app-remix. Covers subscriptions, one-time purchases, usage-based billing, discounts, and the project's billing implementation patterns.
Comprehensive code investigation and audit tool. Discovers all project features, then dispatches parallel subagents to analyze issues, risks, dead code, missing functionality, and redundancies. Produces a prioritized risk report. Use this skill when the user asks to "investigate code", "audit project", "find risks", "check code quality", "analyze codebase", "what's wrong with this code", "project health check", "code review entire project", "find dead code", "find redundant code", or any request for a thorough codebase analysis.
| name | shopify-app-i18n |
| description | Guide for adding Multi-language support to Shopify Apps using i18next. Covers setup, localization files, and Admin context. |
Shopify merchants exist globally. Your app MUST support multiple languages to be featured or widely adopted.
i18next (Standard)react-i18nextremix-i18nextnpm install i18next react-i18next remix-i18next i18next-fs-backend i18next-http-backend
app/i18n.server.ts)Create a server-side instance to detect language.
import { RemixI18Next } from "remix-i18next/server";
import { createInstance } from "i18next";
import i18n from "~/i18n"; // client config
import { resolve } from "node:path";
export const i18nServer = new RemixI18Next({
detection: {
supportedLanguages: i18n.supportedLngs,
fallbackLanguage: i18n.fallbackLng,
},
// This is the configuration for i18next
i18next: {
...i18n,
backend: {
loadPath: resolve("./public/locales/{{lng}}/{{ns}}.json"),
},
},
});
app/root.tsx)Inject the locale into the document.
export async function loader({ request }: LoaderFunctionArgs) {
const locale = await i18nServer.getLocale(request);
return json({ locale });
}
export const handle = {
// In the handle export, we can add a reference to a translation namespace
// This will load the translations for this namespace for this route
i18n: "common",
};
export default function App() {
const { locale } = useLoaderData<typeof loader>();
useChangeLanguage(locale); // Syncs remix locale with i18next
return (
<html lang={locale} dir={i18n.dir(locale)}>
{/* ... */}
</html>
);
}
Store JSON files in public/locales.
public/
locales/
en/
common.json
fr/
common.json
vi/
common.json
Example common.json:
{
"welcome": "Welcome to my app",
"dashboard": {
"title": "Dashboard",
"stats": "Statistics"
}
}
import { useTranslation } from "react-i18next";
export function DashboardHeader() {
const { t } = useTranslation("common");
return (
<Page title={t("dashboard.title")}>
<p>{t("welcome")}</p>
</Page>
);
}
Shopify passes the locale in the URL query params (?locale=fr-FR) or you can fetch it from the GraphQL Admin API (Shop.billingAddress.country or similar, though strictly speaking the Admin UI language is preferred).
Typically, remix-i18next detection handles the request headers/query params automatically if configured correctly.
For Theme App Extensions or Checkout UI Extensions, they have their own locales folder in their directory. They do NOT share the Remix app's locales.
extensions/my-ext/locales/en.default.jsonextensions/checkout-ui/locales/en.json