# General Translation Integrations: Inicio rápido
URL: https://generaltranslation.com/es/docs/integrations/shopify/quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Traduce la interfaz de una tienda headless de Shopify Hydrogen con gt-react o gt-next y muestra su catálogo en el mismo idioma.

Una tienda de Shopify localizada tiene dos capas de texto, y cada una se traduce en un sitio distinto:

* **Contenido del catálogo.** Los productos, las colecciones y las páginas provienen de Shopify a través de Hydrogen, el SDK de tiendas de Shopify independiente del framework. Los traduces con General Translation, guardas los resultados en las traducciones de Shopify y los lees mediante la Storefront API.
* **Textos de la tienda.** La navegación, los botones, los mensajes del carrito y el resto de los textos de tu código. De traducirlos se encarga el SDK de General Translation para tu framework: [`gt-react`](/docs/react/react-router-quickstart) en React Router o [`gt-next`](/docs/react/nextjs-quickstart) en Next.js, incluida la plantilla Vercel Shop.

Ambas capas leen la misma configuración regional en cada solicitud, de modo que una página en francés muestra tanto los textos como los títulos de los productos en francés.

*Nota: Esta integración está pensada para tiendas headless que usan Hydrogen 2026.10 con React Router o Next.js. Los temas de Online Store creados con Liquid usan, en cambio, las aplicaciones de traducción propias de Shopify.*

## Tienda de ejemplo [#examples]

[gt-shopify-vercel.vercel.app](https://gt-shopify-vercel.vercel.app) es la plantilla Vercel Shop de Next.js con `gt-next`. Las configuraciones regionales llevan un prefijo en la ruta, excepto la configuración regional predeterminada, que no lo lleva; todas las páginas y el catálogo están traducidos al francés, japonés, coreano e indonesio, y cada idioma vende en su propio mercado de Shopify y con su propia moneda. Las traducciones del catálogo se incluyen en el paquete mediante la CLI, en lugar de almacenarse en Shopify.

## Antes de empezar [#before-start]

Necesitas:

* Una tienda headless de Shopify que use `@shopify/hydrogen` con React Router 7 u 8, o el App Router de Next.js, como Vercel Shop.
* Un [proyecto](/docs/platform/dashboard/get-started) y la CLI, con la sesión iniciada mediante [`gt login`](/docs/cli/reference/commands/login).
* Si quieres almacenar las traducciones del catálogo en Shopify, acceso a **Settings > Languages** en el panel de administración de Shopify.

## Inicio rápido [#quickstart]

### 1. Define tus configuraciones regionales una sola vez

Indica la configuración regional predeterminada y las configuraciones regionales de destino en `gt.config.json`. El enrutamiento, `<html lang>`, el proveedor, el selector de idioma y las consultas de Shopify obtienen los valores de esta lista.

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["fr", "ja"]
}
```

Shopify identifica los idiomas mediante valores `LanguageCode` como `FR` y `PT_BR`, así que mantén un mapeo explícito entre cada configuración regional y su código de Shopify. (Consulta [Códigos de configuración regional](/docs/integrations/shopify/reference/locale-handling#locale-codes)). Si almacenas las traducciones del catálogo en Shopify, añade y publica también esos mismos idiomas en el panel de administración de Shopify, en **Settings &gt; Languages**.

### 2. Configura la traducción de la tienda

<Tabs items={['React Router', 'Next.js']}>
  <Tab value="React Router">
    Sigue el [Inicio rápido de React Router](/docs/react/react-router-quickstart). Luego, pasa la misma configuración regional al contexto de la solicitud de Hydrogen en el middleware raíz. (Consulta [Localizar Shopify Hydrogen con React Router](/docs/integrations/shopify/guides/localizing-react-router)).
  </Tab>

  <Tab value="Next.js">
    Agrega `gt-next`, mueve las rutas de la tienda a `app/[locale]` y reescribe las solicitudes sin prefijo hacia la configuración regional predeterminada una vez que se ejecuten los manejadores de solicitud de rutas de Shopify. (Consulta [Localizar una tienda de Shopify con Next.js](/docs/integrations/shopify/guides/localizing-nextjs)).
  </Tab>
</Tabs>

### 3. Consulta Shopify en el idioma activo

Agrega `@inContext(language: $language)` a las consultas de la Storefront API que devuelven contenido del catálogo. El cliente Storefront de Hydrogen rellena `$language` y `$country` a partir del `i18n` del contexto de la solicitud, así que nunca tienes que pasarlos en cada consulta.

```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
    }
  }
`);
```

El país determina el mercado, que a su vez fija los precios, la moneda y la disponibilidad. Puedes mantener un único país para todos los idiomas, o bien vender cada idioma en su propio mercado y trasladar el carrito cuando cambie el idioma. (Consulta [Idioma y mercado](/docs/integrations/shopify/reference/locale-handling#language-market)).

Shopify devuelve el texto de origen en cualquier campo que no tenga traducción. Para completar el catálogo, sigue [Traducir productos de Shopify con la Admin API](/docs/integrations/shopify/guides/translating-products).

### 4. Generar traducciones

Marca los textos de la tienda para traducirlos y, después, genera las traducciones con [`npx gt translate`](/docs/cli/reference/commands/translate). Ejecútalo antes de la compilación y [almacena las traducciones localmente](/docs/react/guides/storing-translations) para que las páginas en caché y prerrenderizadas se publiquen con ellas.

<Tabs items={['React Router', 'Next.js']}>
  <Tab value="React Router">
    ```json title="package.json"
    {
      "scripts": {
        "build": "npx gt translate && react-router build"
      }
    }
    ```
  </Tab>

  <Tab value="Next.js">
    ```json title="package.json"
    {
      "scripts": {
        "build": "npx gt translate && next build"
      }
    }
    ```
  </Tab>
</Tabs>

<Callout type="info">
  **Nota:** Si prefieres que los textos nuevos se envuelvan y se traduzcan en pull requests, conecta el repositorio a [Locadex](/docs/platform/locadex/quickstart).
</Callout>

### 5. Comprueba una página localizada

Inicia la tienda y solicita una página en una configuración regional de destino. Comprueba que:

* `<html lang>`, los textos de la tienda y los títulos traducidos de los productos coinciden con la configuración regional.
* Los precios conservan la moneda que devuelve Shopify.
* Las rutas del carrito, del proceso de pago y de la cuenta siguen funcionando después de cambiar de idioma.

## Preguntas frecuentes [#faqs]

### ¿Hydrogen traduce automáticamente el contenido de los productos?

No. Hydrogen lee las traducciones de Shopify ya existentes a través de la Storefront API, pero no las genera. Traduce los campos del catálogo con General Translation y registra los resultados en Shopify, o bien incluye el JSON del catálogo traducido en el paquete de tu tienda. (Consulta [Traducir productos de Shopify con la Admin API](/docs/integrations/shopify/guides/translating-products)).

### ¿Cambiar de idioma también cambia la moneda?

No, no por sí solo. Los precios dependen del mercado de Shopify y del país del comprador asociado al carrito; el idioma de la página solo determina el texto traducido. La tienda de ejemplo asocia explícitamente cada idioma a un mercado, pero puedes mantener un único mercado para todos los idiomas u ofrecer un selector de país independiente. (Consulta [Idioma y mercado](/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.