# General Translation Integrations: Démarrage rapide
URL: https://generaltranslation.com/fr/docs/integrations/shopify/quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Traduisez l’interface d’une boutique Shopify Hydrogen headless avec gt-react ou gt-next et affichez son catalogue dans la même langue.
Une boutique Shopify localisée comporte deux couches de texte, chacune traduite à un endroit différent :
* **Contenu du catalogue.** Les produits, collections et pages proviennent de Shopify via Hydrogen, le SDK de boutique de Shopify, indépendant de tout framework. Vous les traduisez avec General Translation, enregistrez les résultats dans les traductions de Shopify, puis les récupérez via la Storefront API.
* **Textes de la boutique.** La navigation, les boutons, les messages du panier et les autres textes présents dans votre code. Ils sont traduits par le SDK General Translation propre à votre framework : [`gt-react`](/docs/react/react-router-quickstart) avec React Router, ou [`gt-next`](/docs/react/nextjs-quickstart) avec Next.js, y compris le modèle Vercel Shop.
Les deux couches utilisent le même paramètre régional pour chaque requête : une page en français affiche donc à la fois l’interface et les titres de produits en français.
*Remarque : cette intégration s’adresse aux boutiques headless qui utilisent Hydrogen 2026.10 avec React Router ou Next.js. Pour les thèmes Online Store conçus avec Liquid, utilisez plutôt les applications de traduction de Shopify.*
## Exemple de boutique [#examples]
[gt-shopify-vercel.vercel.app](https://gt-shopify-vercel.vercel.app) est le modèle Next.js Vercel Shop intégrant `gt-next`. Les paramètres régionaux sont préfixés dans le chemin, sauf les paramètres régionaux par défaut. Toutes les pages ainsi que le catalogue sont traduits en français, japonais, coréen et indonésien, et chaque langue dispose de son propre marché Shopify et de sa propre devise. Les traductions du catalogue sont intégrées au bundle via la CLI plutôt que stockées dans Shopify.
## Avant de commencer [#before-start]
Vous aurez besoin de :
* Une boutique Shopify headless qui utilise `@shopify/hydrogen` avec React Router 7 ou 8, ou l'App Router de Next.js, comme Vercel Shop.
* Un [projet](/docs/platform/dashboard/get-started) et la CLI, avec une session ouverte via [`gt login`](/docs/cli/reference/commands/login).
* Pour stocker les traductions du catalogue dans Shopify, un accès à **Settings > Languages** dans l'interface d'administration de Shopify.
## Démarrage rapide [#quickstart]
### 1. Définissez vos paramètres régionaux une seule fois
Indiquez les paramètres régionaux par défaut et les paramètres régionaux cibles dans `gt.config.json`. Le routage, ``, le fournisseur, le sélecteur de langue et les requêtes Shopify s'appuient tous sur cette liste.
```json title="gt.config.json"
{
"defaultLocale": "en",
"locales": ["fr", "ja"]
}
```
Shopify identifie les langues à l’aide de valeurs `LanguageCode` telles que `FR` et `PT_BR` : conservez donc une table de correspondance explicite entre chaque paramètre régional et son code Shopify (voir [Codes de paramètres régionaux](/docs/integrations/shopify/reference/locale-handling#locale-codes)). Si vous stockez les traductions de votre catalogue dans Shopify, ajoutez et publiez également ces mêmes langues dans l’interface d’administration de Shopify, sous **Settings > Languages**.
### 2. Configurer la traduction de la boutique
Suivez le [Démarrage rapide React Router](/docs/react/react-router-quickstart). Transmettez ensuite le même paramètre régional au contexte de la requête de Hydrogen dans votre middleware racine. (Voir [Localiser Shopify Hydrogen avec React Router](/docs/integrations/shopify/guides/localizing-react-router).)
Ajoutez `gt-next`, déplacez les routes de la boutique sous `app/[locale]`, puis réécrivez les requêtes sans préfixe vers les paramètres régionaux par défaut une fois les gestionnaires de routes de Shopify exécutés. (Voir [Localiser une boutique Shopify sous Next.js](/docs/integrations/shopify/guides/localizing-nextjs).)
### 3. Interroger Shopify dans la langue active
Ajoutez `@inContext(language: $language)` aux requêtes de la Storefront API qui renvoient du contenu du catalogue. Le client Storefront de Hydrogen renseigne `$language` et `$country` à partir de l'objet `i18n` du contexte de la requête : vous n'avez donc jamais à les passer requête par requête.
```ts title="lib/queries.ts"
import {gql} from '@shopify/hydrogen';
export const PRODUCT_QUERY = gql(`
query Product($handle: String!, $country: CountryCode, $language: LanguageCode)
@inContext(country: $country, language: $language) {
product(handle: $handle) {
title
description
}
}
`);
```
Le pays détermine le marché, qui fixe les prix, la devise et la disponibilité. Vous pouvez soit conserver un seul pays pour toutes les langues, soit vendre chaque langue sur son propre marché et transférer le panier lors d'un changement de langue (voir [Langue et marché](/docs/integrations/shopify/reference/locale-handling#language-market)).
Shopify renvoie le texte source pour tout champ non traduit. Pour compléter le catalogue, suivez [Traduire des produits Shopify avec l'Admin API](/docs/integrations/shopify/guides/translating-products).
### 4. Générer des traductions
Marquez les textes de la boutique à traduire, puis générez les traductions avec [`npx gt translate`](/docs/cli/reference/commands/translate). Exécutez cette commande avant la compilation et [stockez les traductions localement](/docs/react/guides/storing-translations) : les pages mises en cache et prérendues seront ainsi livrées avec leurs traductions.
```json title="package.json"
{
"scripts": {
"build": "npx gt translate && react-router build"
}
}
```
```json title="package.json"
{
"scripts": {
"build": "npx gt translate && next build"
}
}
```
**Remarque :** si vous préférez que les nouveaux textes soient encapsulés et traduits via des pull requests, connectez le dépôt à [Locadex](/docs/platform/locadex/quickstart).
### 5. Vérifier une page localisée
Lancez la boutique et ouvrez une page dans une locale cible. Vérifiez que :
* ``, les textes de la boutique et les titres de produits traduits correspondent au paramètre régional.
* Les prix conservent la devise renvoyée par Shopify.
* Les routes du panier, du paiement et du compte fonctionnent toujours après un changement de langue.
## FAQ [#faqs]
### Hydrogen traduit-il automatiquement le contenu des produits ?
Non. Hydrogen lit les traductions Shopify existantes via la Storefront API ; il ne les génère pas. Traduisez les champs du catalogue avec General Translation, puis enregistrez les résultats dans Shopify, ou intégrez le JSON du catalogue traduit au bundle de votre boutique. (Consultez [Traduire des produits Shopify avec l'Admin API](/docs/integrations/shopify/guides/translating-products).)
### Changer de langue modifie-t-il la devise ?
Pas à lui seul. Les prix dépendent du marché Shopify et du pays de l'acheteur associé au panier ; la langue de la page ne détermine que le texte traduit. La boutique d'exemple associe explicitement chaque langue à un marché, mais vous pouvez conserver un seul marché pour toutes les langues ou proposer un sélecteur de pays distinct. (Voir [Langue et marché](/docs/integrations/shopify/reference/locale-handling#language-market)).
## Next steps
- /docs/integrations/shopify/guides/localizing-react-router
- /docs/integrations/shopify/guides/localizing-nextjs
- /docs/integrations/shopify/guides/translating-products
- /docs/integrations/shopify/guides/selling-in-markets
## Sitemap
See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.