# General Translation Integrations: Avvio rapido URL: https://generaltranslation.com/it/docs/integrations/shopify/quickstart.mdx Docs index: https://generaltranslation.com/llms.txt Description: Traduci l'interfaccia di uno storefront headless Shopify Hydrogen con gt-react o gt-next e mostra il catalogo nella stessa lingua. Uno storefront Shopify localizzato contiene due livelli di testo, ognuno dei quali viene tradotto in un punto diverso: * **Contenuti del catalogo.** Prodotti, collezioni e pagine arrivano da Shopify tramite Hydrogen, l'SDK di Shopify per storefront indipendente dal framework. Li traduci con General Translation, salvi i risultati nelle traduzioni di Shopify e li leggi tramite la Storefront API. * **Testi dello storefront.** Navigazione, pulsanti, messaggi del carrello e gli altri testi presenti nel codice. A tradurli è l'SDK di General Translation per il tuo framework: [`gt-react`](/docs/react/react-router-quickstart) con React Router, oppure [`gt-next`](/docs/react/nextjs-quickstart) con Next.js, incluso il template Vercel Shop. Entrambi i livelli leggono la stessa impostazione regionale a ogni richiesta, così una pagina in francese mostra sia i testi sia i titoli dei prodotti in francese. *Nota: questa integrazione è pensata per storefront headless che usano Hydrogen 2026.10 con React Router o Next.js. Per i temi dell'Online Store realizzati con Liquid si usano invece le app di traduzione di Shopify.* ## Storefront di esempio [#examples] [gt-shopify-vercel.vercel.app](https://gt-shopify-vercel.vercel.app) è il template Next.js di Vercel Shop integrato con `gt-next`. Le impostazioni regionali sono indicate da un prefisso nel percorso, tranne l'impostazione locale predefinita, che non ha prefisso. Tutte le pagine e il catalogo sono tradotti in francese, giapponese, coreano e indonesiano, e ogni lingua vende nel proprio mercato Shopify e nella propria valuta. Le traduzioni del catalogo vengono incluse nel bundle tramite la CLI, anziché essere archiviate in Shopify. ## Prima di iniziare [#before-start] Ti serve: * Uno storefront Shopify headless basato su `@shopify/hydrogen` con React Router 7 o 8, oppure sull'App Router di Next.js, come Vercel Shop. * Un [progetto](/docs/platform/dashboard/get-started) e la CLI, con accesso effettuato tramite [`gt login`](/docs/cli/reference/commands/login). * Per archiviare le traduzioni del catalogo in Shopify, l'accesso a **Settings > Languages** nel pannello di amministrazione di Shopify. ## Avvio rapido [#quickstart] ### 1. Definisci le impostazioni regionali una sola volta Elenca l'impostazione locale predefinita e le impostazioni locali di destinazione in `gt.config.json`. Il routing, ``, il provider, il selettore della lingua e le query di Shopify attingono tutti a questo elenco. ```json title="gt.config.json" { "defaultLocale": "en", "locales": ["fr", "ja"] } ``` Shopify identifica le lingue tramite valori `LanguageCode` come `FR` e `PT_BR`, quindi mantieni una mappatura esplicita tra ciascuna impostazione regionale e il relativo codice Shopify (vedi [Codici locale](/docs/integrations/shopify/reference/locale-handling#locale-codes)). Se memorizzi le traduzioni del catalogo in Shopify, aggiungi e pubblica le stesse lingue anche nel pannello di amministrazione di Shopify, in **Settings > Languages**. ### 2. Configura la traduzione dello storefront Segui l'[Avvio rapido di React Router](/docs/react/react-router-quickstart). Poi passa la stessa impostazione regionale al contesto della richiesta di Hydrogen nel middleware radice. (Vedi [Localizzare Shopify Hydrogen con React Router](/docs/integrations/shopify/guides/localizing-react-router)). Aggiungi `gt-next`, sposta le route dello storefront in `app/[locale]` e, dopo l'esecuzione dei gestori di route di Shopify, riscrivi le richieste senza prefisso verso l'impostazione locale predefinita. (Vedi [Localizzare uno storefront Shopify con Next.js](/docs/integrations/shopify/guides/localizing-nextjs)). ### 3. Esegui query su Shopify nella lingua attiva Aggiungi `@inContext(language: $language)` alle query della Storefront API che restituiscono contenuti del catalogo. Il client Storefront di Hydrogen popola `$language` e `$country` a partire dall'oggetto `i18n` del contesto della richiesta, quindi non dovrai mai passarli nelle singole query. ```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 } } `); ``` Il paese determina il mercato, che a sua volta stabilisce prezzi, valuta e disponibilità. Puoi mantenere un unico paese per tutte le lingue, oppure vendere ogni lingua nel proprio mercato e spostare il carrello quando la lingua cambia. (Vedi [Lingua e mercato](/docs/integrations/shopify/reference/locale-handling#language-market)). Shopify restituisce il testo di origine per qualsiasi campo privo di traduzione. Per popolare il catalogo, segui [Tradurre i prodotti Shopify con l'Admin API](/docs/integrations/shopify/guides/translating-products). ### 4. Genera traduzioni Contrassegna i testi dello storefront da tradurre, quindi genera le traduzioni con [`npx gt translate`](/docs/cli/reference/commands/translate). Esegui il comando prima della build e [salva le traduzioni in locale](/docs/react/guides/storing-translations), così le pagine in cache e prerenderizzate verranno distribuite già tradotte. ```json title="package.json" { "scripts": { "build": "npx gt translate && react-router build" } } ``` ```json title="package.json" { "scripts": { "build": "npx gt translate && next build" } } ``` **Nota:** se invece preferisci che i nuovi testi vengano racchiusi e tradotti tramite pull request, collega il repository a [Locadex](/docs/platform/locadex/quickstart). ### 5. Controlla una pagina localizzata Avvia lo storefront e richiedi una pagina in un'impostazione regionale di destinazione. Verifica che: * ``, i testi dello storefront e i titoli tradotti dei prodotti corrispondano all'impostazione regionale. * I prezzi mantengano la valuta restituita da Shopify. * Le route del carrello, del checkout e dell'account continuino a funzionare dopo il cambio di lingua. ## Domande frequenti [#faqs] ### Hydrogen traduce automaticamente i contenuti dei prodotti? No. Hydrogen legge le traduzioni Shopify esistenti tramite la Storefront API, ma non le genera. Traduci i campi del catalogo con General Translation e registra i risultati in Shopify, oppure includi il JSON del catalogo tradotto nel bundle del tuo storefront. (Vedi [Tradurre i prodotti Shopify con l'Admin API](/docs/integrations/shopify/guides/translating-products)). ### Cambiare lingua cambia anche la valuta? Non di per sé. I prezzi dipendono dal mercato Shopify e dal paese dell'acquirente associato al carrello, mentre la lingua della pagina determina il testo tradotto. Lo storefront di esempio associa esplicitamente ogni lingua a un mercato, ma puoi mantenere un unico mercato per tutte le lingue oppure offrire un selettore del paese separato. (Vedi [Lingua e mercato](/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.