Supporting multiple languages for custom storefronts
This guide explains how to retrieve translated content by using the Storefront API. Before you can retrieve translated content, you need to create it by using the GraphQL Admin API.
Prerequisites
This guide assumes that you have completed our Getting started with the Storefront API guide, and that you are authenticated with the API. The guide also assumes that you've created a product on your test shop.
The code examples in this guide can be run in GraphiQL or your preferred API client.
Storefront API translatable resources
The following resources include 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 |
Retrieve a resource's ID
You need a resource's ID to retrieve its translations. The following example retrieves the ID of a product with the title white t-shirt:
Query
{
products(query:"title:white t-shirt", first: 1) {
edges {
node {
title
id
}
}
}
}Response
{
"data": {
"products": {
"edges": [
{
"node": {
"title": "White T-Shirt",
"id": "gid://shopify/Product/10521579010"
}
}
]
}
}
}Retrieving Storefront API translations
To query supported resources and return translated content, include the Accept-Language HTTP header in your request.
The following example returns Spanish translations for a product's title, description, and options:
Header
Accept-Language: es
Variables
An array of resource IDs that you want to retrieve translations for.
{
"ids": [
"gid://shopify/Product/10521579010"
]
}Query
query getTranslatedProductFields($ids: [ID!]!) {
nodes(ids: $ids) {
... on Product {
__typename
title
description
descriptionHtml
options {
__typename
name
values
}
}
}
}Response
{
"data": {
"nodes": [
{
"__typename": "Product",
"title": "Camiseta blanca",
"description": "primeiro producto de teste",
"descriptionHtml": "<p> primero producto de teste </p>",
"options": [
{
"__typename": "ProductOption",
"name": "Talla",
"values": [
"Pequeña",
"Media",
"Grande"
]
}
]
}
]
}
}