skills.rest
fuad-hastechit
fuad-hastechitCOMMUNITY
Explore all skills by this author →
GitHub

translation

Wire i18next with react-i18next for Shopify app UI and server translations.

Updated May 11, 2026
Search Tags:#multilanguage#i18next#react-i18next#prisma settings#pdf translations#language switcher#shopify app i18n
One-click install
npx skills add https://github.com/fuad-hastechit/gropulse-skills --skill translation-fuad-hastechit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: translation
Source: https://github.com/fuad-hastechit/gropulse-skills/tree/main/skills/translation
Command: npx skills add https://github.com/fuad-hastechit/gropulse-skills --skill translation-fuad-hastechit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It eliminates the effort of manually translating a Shopify app UI and server-rendered outputs by providing a complete multilanguage setup with per-shop persistence and automatic language resolution.

Core Features & Use Cases

  • App UI translations with i18next + react-i18next: enables React Router v7 components to render language-specific text and switch languages client-side without a page reload.
  • Per-shop saved language using Prisma settings: stores the selected language in the Prisma Settings JSON so each shop remembers its preference.
  • Server-side/PDF label translations: provides flat JSON translation maps to correctly render labels for PDFs and Liquid/server output using request-time language resolution from billing country and customer locale.

Use case example: you onboard a new Shopify store in France, want the admin UI and generated PDF labels to appear in French, and need language to persist across sessions while still auto-detecting the best language from billing and customer locale.

Quick Start

Ask for the translation setup for your existing React Router v7 Shopify app so the UI renders multilingual strings and PDF/server labels in the selected language.

Frequently Asked Questions about translation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add multilanguage support to a Shopify app UI?▼

Multilanguage support for a Shopify app UI is added by wiring i18next with react-i18next to render language-specific text and switch languages client-side without a page reload.

How do I persist a selected language preference per shop in a Shopify app?▼

You persist a selected language per shop by storing the preference in a Prisma Settings JSON object, allowing each shop to remember its language choice across sessions.

How do I translate server-side PDF labels based on customer locale?▼

Server-side PDF label translations use flat JSON translation maps and request-time language resolution from the shop's billing country and customer locale to render correct output.

Can I auto-detect the app language from a shop's billing country?▼

Yes, language auto-detection uses deterministic server resolution logic mapping the shop's billing country and customer locale to a supported language for the UI and server labels.

Does this translation setup work with React Router v7?▼

Yes, the translation setup applies to React Router v7 components using a root loader-driven language source to provide instant multilingual string rendering and client-side switching.

How do I update the language instantly with a language switcher in a React app?▼

A language switcher UI updates the i18next instance instantly and simultaneously saves the selection to the server Prisma settings, ensuring immediate UI updates without reloading.

Related Skills

Explore More Software Engineering Skills→
gocallumgocallum
22

prisma-orm-v7-skills

Upgrade Prisma ORM from v6 to v7 with configuration and migration steps.

Community
Advanced
lobehublobehub
81.4k

i18n

Manage react-i18next translations and locale data in React applications.

Official
Intermediate
henkisdabrohenkisdabro
77

shopify-liquid-syntax

Render dynamic Shopify theme content using Liquid templates.

Community
Basic
TMHSDigitalTMHSDigital
2

mobile-i18n

Configure i18n libraries for React Native/Expo or Flutter with locale detection and RTL support.

Community
Intermediate