Shopify Hydrogen Multi-Language & Multi-Currency

Expanding to international markets requires more than translating a few pages. Your Shopify Hydrogen storefront needs proper locale routing, translated product content, localized currency display, and international SEO signals. This guide covers the practical steps to get multi-language and multi-currency working correctly in a headless Hydrogen store.

Shopify Markets is the built-in system for managing international selling. It handles currency conversion, localized pricing, duties and taxes, and language assignments per market. In Hydrogen, you interact with Markets through the Storefront API by passing the buyer's country and language in the @inContext directive on your GraphQL queries.

This means the same API call returns different prices, product descriptions, and availability depending on the market context you provide.

The most common pattern for international Hydrogen stores is locale-prefixed URLs:

• /en-us/products/handle for US English
• /fr-fr/products/handle for France French
• /de-de/products/handle for Germany German

In Remix, you implement this with a route prefix parameter that captures the locale and passes it to a context provider. Every downstream component and API call then uses this locale for content and pricing.

Use automatic detection based on the visitor's IP or browser language to suggest the right locale, but always let users switch manually through a language and country selector.

Shopify supports translated product titles, descriptions, and metafield values through its translation APIs. When you query the Storefront API with a specific language, translated content is returned automatically for any field that has a translation.

For non-Shopify content like blog posts, marketing copy, or custom page sections, you have two options:

• Store translations in a headless CMS like Sanity or Contentful that supports localized fields.
• Use Shopify metaobjects with translated metafields for simpler content structures.

Avoid mixing translation approaches. Pick one system and use it consistently so content editors have a single workflow.

The Storefront API returns prices in the buyer's local currency when you pass the correct country context. Your Hydrogen components should:

• Format prices using the Intl.NumberFormat API with the correct currency code and locale for proper symbol placement and decimal handling.
• Display both the local currency and an optional reference price if your market expects it.
• Handle price rounding rules that differ by currency (JPY has no decimals, most European currencies use two).

Search engines need explicit signals to understand which version of a page targets which audience. Implement these in every Hydrogen route:

• Add hreflang link tags pointing to every locale variant of the current page, including a x-default fallback.
• Set self-referencing canonical tags on each localized page.
• Include all locale variants in your sitemap with the xhtml:link alternate entries.
• Avoid duplicate content by ensuring each locale has unique translated metadata and descriptions.

For broader SEO guidance, review our Hydrogen SEO checklist.

Shopify Markets can calculate duties and import taxes at checkout so international buyers see the full landed cost upfront. In your Hydrogen storefront, display estimated duties on product pages when available, and clearly communicate shipping policies per market. Transparency at this stage reduces cart abandonment from unexpected costs at checkout.

• Use VPN or Shopify's market preview tools to test each locale end-to-end.
• Verify that currency, language, and pricing all update correctly when switching markets.
• Check that hreflang tags render correctly in page source for every locale.
• Test checkout flow with international addresses and local payment methods.
• Validate that translated structured data appears in Google's Rich Results Test.

For platform-level implementation details, use the official docs: Hydrogen and Storefront API.