Multi-Language Support in GraphQL Storefront API

The Storefront GraphQL API supports queries for multiple language translations within a storefront channel.

You can query product information for locales in a storefront channel. For information on what product information we support in multiple languages, see the International Enhancements for Multi-Storefront overview.

Prerequisites

• Create language translations:

  Set the product data for a locale using the GraphQL Admin API. For example queries, see the International Enhancements for Multi-Storefront overview.

  
  

• Choose a default locale:

  You can choose a default locale for the storefront channel, default to the global locale, or override the default locale with the shopper browser language. Read more about how to choose a default locale (opens in a new tab) through the control panel. These locale settings affect which locale the API resolves.

Returned data

The response includes the following:

• Enabled locales: The list of the enabled locales for a channel. Includes the default locale and the shopper languages in the browser cookies.

  
  

• Resolved locale: Indicates the locale that was selected to contain the returned data.

  If you chose a default locale in the control panel, the resolved locale is the default locale.

  If you chose to override the default locale with the shopper browser language, the API uses the browser's cookies to determine a shopper's language preference. To override a shopper's preference, specify a preferred locale through the Accept-Language header or a GraphQL directive when you send the query. The directive takes precedence over the Accept-Language header
  

  
  

• Product data for the resolved locale: If there is no product data for the resolved locale, the response defaults to global product data.

Example

POST https://your_store.example.com/graphql
Authorization: Bearer {token}
Accept: application/json
Content-Type: application/json
 
query @shopperPreferences(locale:"fr") { # specific requested locale via directive
  shopperPreferences {
    locale {
      resolved # resolved locale
    }
  }
  site {
    settings {
      locales { # list of enabled locales
        code
        isDefault
      }
    }
    products {
      edges {
        node {
          name # localized name
        }
      }
    }
  }
}

Resources

• International Enhancements for Multi-Storefront overview
• International Enhancements for Multi-Storefront - Localization Settings (opens in a new tab) support article