# General Translation Integrations: Быстрый старт
URL: https://generaltranslation.com/ru/docs/integrations/shopify/quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Переведите интерфейс headless-витрины Shopify Hydrogen с помощью gt-react или gt-next и показывайте её каталог на том же языке.

Текст локализованной витрины Shopify делится на два уровня, и каждый из них переводится отдельно:

* **Содержимое каталога.** Товары, коллекции и страницы поступают из Shopify через Hydrogen — SDK Shopify для витрин, не привязанный к конкретному фреймворку. Вы переводите их с помощью General Translation, сохраняете результаты в переводах Shopify и получаете их через Storefront API.
* **Тексты витрины.** Навигация, кнопки, сообщения корзины и другой текст в вашем коде. Его переводит SDK General Translation для вашего фреймворка: [`gt-react`](/docs/react/react-router-quickstart) для React Router или [`gt-next`](/docs/react/nextjs-quickstart) для Next.js, включая шаблон Vercel Shop.

Оба уровня используют одну и ту же локаль для каждого запроса, поэтому на французской странице и тексты интерфейса, и названия товаров отображаются на французском.

*Примечание: эта интеграция предназначена для headless-витрин на Hydrogen 2026.10 с React Router или Next.js. Для тем Online Store на Liquid используются собственные приложения Shopify для перевода.*

## Пример витрины [#examples]

[gt-shopify-vercel.vercel.app](https://gt-shopify-vercel.vercel.app) — это шаблон Vercel Shop для Next.js с `gt-next`. Локаль указывается префиксом в пути, а у локали по умолчанию префикса нет. Все страницы и каталог переведены на французский, японский, корейский и индонезийский языки, а для каждого языка продажи ведутся на отдельном рынке Shopify в своей валюте. Переводы каталога не хранятся в Shopify, а включаются в бандл с помощью CLI.

## Перед началом работы [#before-start]

Вам понадобится:

* Headless-витрина Shopify на базе `@shopify/hydrogen` с React Router 7 или 8 либо на Next.js App Router — например, Vercel Shop.
* [Проект](/docs/platform/dashboard/get-started) и CLI, в котором выполнен вход через [`gt login`](/docs/cli/reference/commands/login).
* Чтобы хранить переводы каталога в Shopify, — доступ к разделу **Settings > Languages** в админ-панели Shopify.

## Быстрый старт [#quickstart]

### 1. Задайте локали в одном месте

Укажите локаль по умолчанию и целевые локали в `gt.config.json`. Маршрутизация, `<html lang>`, провайдер, переключатель языка и запросы к Shopify берут данные из этого списка.

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

Shopify обозначает языки значениями `LanguageCode`, например `FR` и `PT_BR`, поэтому задайте явное сопоставление каждой локали с её кодом Shopify (см. [Коды локалей](/docs/integrations/shopify/reference/locale-handling#locale-codes)). Если вы храните переводы каталога в Shopify, также добавьте и опубликуйте те же языки в админ-панели Shopify в разделе **Settings &gt; Languages**.

### 2. Настройка перевода витрины

<Tabs items={['React Router', 'Next.js']}>
  <Tab value="React Router">
    Выполните шаги из руководства [Быстрый старт с React Router](/docs/react/react-router-quickstart). Затем передайте ту же локаль в контекст запроса Hydrogen в корневом промежуточном ПО (см. [Локализация Shopify Hydrogen с React Router](/docs/integrations/shopify/guides/localizing-react-router)).
  </Tab>

  <Tab value="Next.js">
    Добавьте `gt-next`, перенесите маршруты витрины в `app/[locale]` и настройте rewrite запросов без префикса на локаль по умолчанию — после того как отработают обработчики маршрутов Shopify (см. [Локализация витрины Shopify на Next.js](/docs/integrations/shopify/guides/localizing-nextjs)).
  </Tab>
</Tabs>

### 3. Запрашивайте данные Shopify на текущем языке

Добавьте `@inContext(language: $language)` в запросы Storefront API, которые возвращают содержимое каталога. Клиент Storefront в Hydrogen берёт `$language` и `$country` из `i18n` в контексте запроса, поэтому передавать их в каждом запросе не нужно.

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

Страна определяет рынок, а рынок задаёт цены, валюту и доступность товаров. Можно либо использовать одну страну для всех языков, либо выделить каждому языку отдельный рынок и переносить корзину при смене языка (см. [Язык и рынок](/docs/integrations/shopify/reference/locale-handling#language-market)).

Если у поля нет перевода, Shopify возвращает исходный текст. Чтобы заполнить каталог переводами, воспользуйтесь руководством [Перевод товаров Shopify с помощью Admin API](/docs/integrations/shopify/guides/translating-products).

### 4. Создайте переводы

Отметьте тексты витрины для перевода, затем создайте переводы с помощью [`npx gt translate`](/docs/cli/reference/commands/translate). Запускайте команду перед сборкой и [храните переводы локально](/docs/react/guides/storing-translations) — тогда кэшированные и предварительно отрисованные страницы будут поставляться уже с переводами.

<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">
  **Примечание:** Если вы хотите, чтобы новые тексты автоматически оборачивались и переводились в пул-реквестах, подключите репозиторий к [Locadex](/docs/platform/locadex/quickstart).
</Callout>

### 5. Проверьте локализованную страницу

Запустите витрину и откройте страницу в целевой локали. Убедитесь, что:

* `<html lang>`, тексты витрины и переведённые названия товаров соответствуют локали.
* Цены отображаются в валюте, которую возвращает Shopify.
* Маршруты корзины, оформления заказа и аккаунта по-прежнему работают после смены языка.

## Часто задаваемые вопросы [#faqs]

### Переводит ли Hydrogen контент товаров автоматически?

Нет. Hydrogen считывает уже существующие переводы Shopify через Storefront API, но не создаёт их. Переведите поля каталога с помощью General Translation и загрузите результаты в Shopify или включите переведённый JSON каталога в бандл вашей витрины. (См. [Перевод товаров Shopify с помощью Admin API](/docs/integrations/shopify/guides/translating-products)).

### Меняется ли валюта при смене языка?

Сама по себе — нет. Цены зависят от рынка Shopify и страны покупателя, указанной в корзине, а от языка страницы зависит только перевод текста. В демонстрационной витрине каждому языку явно сопоставлен свой рынок, но можно использовать один рынок для всех языков или добавить отдельный селектор страны. (См. [Язык и рынок](/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.