Support multiple languages on storefronts
You can use the Storefront API to support multiple languages on a storefront. This tutorial explains how to retrieve translated content with the Storefront API.
Requirements
Anchor link to section titled "Requirements"- You've reviewed and met the requirements on the Querying data with the Storefront API page.
- You've created resources that can be translated in your store.
- You've created translated content using the GraphQL Admin API.
Retrieve translations with the Storefront API
Anchor link to section titled "Retrieve translations with the Storefront API"To query translatable resources and return translated content, use the @inContext directive to contextualize any query in one of the shop’s available languages.
The following example returns the Spanish translations for a product's title, description, and options.
Query: POST /api/2022-04/graphql.json
View response
JSON response
Create a checkout in the customer’s language
Anchor link to section titled "Create a checkout in the customer’s language"The @inContext directive can also be used with the checkoutCreate mutation to set the checkout locale.
The following example creates a checkout that will load in Spanish when you redirect the customer to its webUrl.
Query: POST /api/2022-04/graphql.json
Retrieve the list of available languages
Anchor link to section titled "Retrieve the list of available languages"For each country context, the languages available are configured within the shop’s Markets settings. The following example shows how to access the list of available languages with the Localization object.
Query: POST /api/2022-04/graphql.json
View response
JSON response
Translatable resources
Anchor link to section titled "Translatable resources"The following resources include translatable properties that can be retrieved by using the Storefront API:
| Type | Fields |
|---|---|
| Collection | title, descriptionHtml, description |
| Metafield | value |
| Article | title, content, contentHtml, excerpt, excerptHtml |
| Blog | title |
| Page | title, body |
| Product | title, descriptionHtml, description |
| ProductOption | name, values |
| ProductVariant | title, selectedOptions |
| ShopPolicy | body |
- Learn how to query international prices for products and orders, and explicitly set the context of a cart and checkout.
- Learn how to manage a cart in Shopify with the Storefront API.
- Retrieve metafields with the Storefront API to access additional information from different types of resources.
- Learn how to manage customer accounts with the Storefront API.
- Learn about the different tools that you can use to create unique buying experiences anywhere your customers are, including websites, apps, and video games.