All Tutorials

Supporting multiple languages for custom storefronts

All Tutorials

Supporting multiple languages for custom storefronts

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"
            ]
          }
        ]
      }
    ]
  }
}