# Internationalization with Shopify Markets

{% hint style="info" %}
This guide is based on the **original guide** - <https://shopify.dev/docs/storefronts/headless/hydrogen/markets>
{% endhint %}

### 1 - Introduction <a href="#introduction" id="introduction"></a>

Shopify Markets helps merchants expand their business to a global audience by creating shopping experiences in local languages and currencies.

Hydrogen provides patterns on top of Remix to setup internationalization (i18n) that leverages a merchant’s market configuration. It also makes locales available throughout the app and in Storefront API queries.

### 2- Requirements \*\*\* <a href="#requirements" id="requirements"></a>

* You've setup you store's regions and languages using [Shopify Markets](https://help.shopify.com/en/manual/markets). <br>

### 3 - Provide a list of available countries <a href="#step-1-provide-a-list-of-available-countries" id="step-1-provide-a-list-of-available-countries"></a>

Create a JSON file with a list of available countries that will be rendered at every page. You can use the `/app/data/countries.ts` file in the Hydrogen demo store as a point of reference.

For performance and SEO reasons, Shopify recommends using a static JSON variable for the countries. Optionally, you can create a build script that generates this file on build.

The following is an example of the countries data structure:

(Below is the **default data of the Ciseco Hydrogen template**. You need to customize this data according to your actual project.)

*`ciseco-hydrogen-vite/app/data/countries.ts`*

```ts
// ciseco-hydrogen-vite/app/data/countries.ts

import type {Localizations} from '~/lib/type';

export const countries: Localizations = {
  default: {
    label: 'United States (USD $)',
    language: 'EN',
    country: 'US',
    currency: 'USD',
  },
  '/en-ad': {
    label: 'Andorra (EUR €)',
    language: 'EN',
    country: 'AD',
    currency: 'EUR',
  },
  '/en-at': {
    label: 'Austria (EUR €)',
    language: 'EN',
    country: 'AT',
    currency: 'EUR',
  },
  '/en-au': {
    label: 'Australia (AUD $)',
    language: 'EN',
    country: 'AU',
    currency: 'AUD',
  },
  '/en-be': {
    label: 'Belgium (EUR €)',
    language: 'EN',
    country: 'BE',
    currency: 'EUR',
  },
  '/en-ca': {
    label: 'Canada (CAD $)',
    language: 'EN',
    country: 'CA',
    currency: 'CAD',
  },
  '/en-cn': {
    label: 'China (CNY ¥)',
    language: 'EN',
    country: 'CN',
    currency: 'CNY',
  },
  '/en-cy': {
    label: 'Cyprus (EUR €)',
    language: 'EN',
    country: 'CY',
    currency: 'EUR',
  },
  '/en-de': {
    label: 'Germany (EUR €)',
    language: 'EN',
    country: 'DE',
    currency: 'EUR',
  },
  '/en-ee': {
    label: 'Estonia (EUR €)',
    language: 'EN',
    country: 'EE',
    currency: 'EUR',
  },
  '/en-es': {
    label: 'Spain (EUR €)',
    language: 'EN',
    country: 'ES',
    currency: 'EUR',
  },
  '/en-fi': {
    label: 'Finland (EUR €)',
    language: 'EN',
    country: 'FI',
    currency: 'EUR',
  },
  '/en-fr': {
    label: 'France (EUR €)',
    language: 'EN',
    country: 'FR',
    currency: 'EUR',
  },
  '/en-gb': {
    label: 'United Kingdom (GBP £)',
    language: 'EN',
    country: 'GB',
    currency: 'GBP',
  },
  '/en-gr': {
    label: 'Greece (EUR €)',
    language: 'EN',
    country: 'GR',
    currency: 'EUR',
  },
  '/en-id': {
    label: 'Indonesia (IDR Rp)',
    language: 'EN',
    country: 'ID',
    currency: 'IDR',
  },
  '/en-ie': {
    label: 'Ireland (EUR €)',
    language: 'EN',
    country: 'IE',
    currency: 'EUR',
  },
  '/en-in': {
    label: 'India (INR ₹)',
    language: 'EN',
    country: 'IN',
    currency: 'INR',
  },
  '/en-it': {
    label: 'Italy (EUR €)',
    language: 'EN',
    country: 'IT',
    currency: 'EUR',
  },
  '/en-jp': {
    label: 'Japan (JPY ¥)',
    language: 'EN',
    country: 'JP',
    currency: 'JPY',
  },
  '/en-kr': {
    label: 'South Korea (KRW ₩)',
    language: 'EN',
    country: 'KR',
    currency: 'KRW',
  },
  '/en-lt': {
    label: 'Lithuania (EUR €)',
    language: 'EN',
    country: 'LT',
    currency: 'EUR',
  },
  '/en-lu': {
    label: 'Luxembourg (EUR €)',
    language: 'EN',
    country: 'LU',
    currency: 'EUR',
  },
  '/en-lv': {
    label: 'Latvia (EUR €)',
    language: 'EN',
    country: 'LV',
    currency: 'EUR',
  },
  '/en-mc': {
    label: 'Monaco (EUR €)',
    language: 'EN',
    country: 'MC',
    currency: 'EUR',
  },
  '/en-me': {
    label: 'Montenegro (EUR €)',
    language: 'EN',
    country: 'ME',
    currency: 'EUR',
  },
  '/en-mt': {
    label: 'Malta (EUR €)',
    language: 'EN',
    country: 'MT',
    currency: 'EUR',
  },
  '/en-nl': {
    label: 'Netherlands (EUR €)',
    language: 'EN',
    country: 'NL',
    currency: 'EUR',
  },
  '/en-nz': {
    label: 'New Zealand (NZD $)',
    language: 'EN',
    country: 'NZ',
    currency: 'NZD',
  },
  '/en-pt': {
    label: 'Portugal (EUR €)',
    language: 'EN',
    country: 'PT',
    currency: 'EUR',
  },
  '/en-sg': {
    label: 'Singapore (SGD $)',
    language: 'EN',
    country: 'SG',
    currency: 'SGD',
  },
  '/en-si': {
    label: 'Slovenia (EUR €)',
    language: 'EN',
    country: 'SI',
    currency: 'EUR',
  },
  '/en-sk': {
    label: 'Slovakia (EUR €)',
    language: 'EN',
    country: 'SK',
    currency: 'EUR',
  },
  '/en-sm': {
    label: 'San Marino (EUR €)',
    language: 'EN',
    country: 'SM',
    currency: 'EUR',
  },
  '/en-th': {
    label: 'Thailand (THB ฿)',
    language: 'EN',
    country: 'TH',
    currency: 'THB',
  },
  '/en-va': {
    label: 'Vatican City (EUR €)',
    language: 'EN',
    country: 'VA',
    currency: 'EUR',
  },
  '/en-vn': {
    label: 'Vietnam (VND ₫)',
    language: 'EN',
    country: 'VN',
    currency: 'VND',
  },
  '/en-xk': {
    label: 'Kosovo (EUR €)',
    language: 'EN',
    country: 'XK',
    currency: 'EUR',
  },
};
```

{% hint style="info" %}
**The above is the Ciseco hydrogen template default data. You need to customize this data according to your actual project.**
{% endhint %}

{% hint style="info" %}
**Note you need to pull to GitHub so Shopify can automatically redeploy for you**
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nghiaxchis.gitbook.io/ciseco-hydrogen-shopifys-headless-theme/cisecos-features/internationalization-with-shopify-markets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.