Documentation
Feedback
Guides
Storefront Development

Storefront Development
Store FrameworkHandling internationalization
Translating Catalog content

Overwrite automatic message translations from the Catalog with a more representative content of your store.

In this step-by-step, you will learn how to overwrite an automatic message translation from the Catalog, such as a product name or a product description, with a more specific and representative content of your store.

As a background, catalog messages are translatable text strings related to the catalog of a store, saved as external data in the Catalog API.

The Catalog API is responsible for manipulating a store’s sales channels, categories, brands, products, SKUs, and specifications.

The following list contains the settings from the Catalog API that are internally set as translatable. This means that, given a locale, an automatic translation fetched from the automatic translation service is available.

  • Category: name, keywords (similar words), page title (tag title), meta tag description, and the URL slug (cross-border stores only).
  • Brand: name, keywords (similar words), page title (tag title), meta tag description, and the URL slug (cross-border stores only).
  • Product: name, keywords (substitute words), page title (tag title), description, short description, meta tag description, and the URL slug (cross-border stores only).
  • SKU name.
  • SKU or product specification: name, description, and values.
  • Category group name.

However, considering literal translations and cultural factors, we understand that you may want to overwrite automatic translations with specific and representative content of your store.

This is possible via the catalog-graphql app, which is the GraphQL interface of the Catalog API.

Step by step

Follow this step-by-step guide to translate text messages from your store's catalog.

  1. Install the vtex.admin-graphql-ide@3.x app using your terminal.
  2. Access the Admin and go to Store Setting > Storefront > GraphQL IDE.
  3. From the dropdown list, choose the vtex.catalog-graphql app.
  4. Click on Query Variables at the bottom of the page.
  5. According to your scenario, check the following sections (category, brand, product, SKU, SKU or product specification, specification values) for orientations on how to fill in the main text box and the Query Variables section.
  6. After adjusting your query, click the play button to run the declared mutation. The expected response is a boolean value indicating true.

Now, no further actions are needed on your part. Once you receive the expected response, you are ready to check out the desired changes in your store!

Check the following gif of the complete process of overwriting automatic translations of a product:

{"base64":"  ","img":{"width":1842,"height":940,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":2331586,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/catalog-internationalization-0.gif"}}

Category

Mutation

Fill in the main text box with the following mutation command:


_10
mutation translate($args:CategoryInputTranslation, $locale:Locale){
_10
translateCategory(category:$args,locale:$locale)
_10
}

Query Variables

According to the following example and explanations, fill in the Query Variables section with the desired translations of each parameter.


_14
{
_14
"args":{
_14
"id": "3",
_14
"name": "Elêtronicos",
_14
"title": "Casa - Eletrônicos",
_14
"description": "Esta é a descrição da categoria Eletrônicos",
_14
"keywords": [
_14
"eletronicos",
_14
"utensílios"
_14
],
_14
"linkId": "eletronicos"
_14
},
_14
"locale": "pt-BR"
_14
}

  • id: the category ID. Every category in your store has a unique ID that can be found under Catalog > Categories in the admin.
  • name: category name.
  • title: category page meta title.
  • description: detailed description of the category.
  • keywords: an object containing the translations of each substitute word of the category.
  • linkId: the textLink (unless your store is a cross-border one, it must not be translated).
  • locale: target translation locale.

If your store is a cross-border one, keep in mind that the linkId is the slug used to build the category URL. Hence, an alias with the translated URL slug of this category will be automatically created in the Rewriter app for the binding associated with the target locale. The alias is stored in the resolveAs field of its related internal route in the Rewriter app. For example: a category registered under the eletronics slug, as in http://{storename}.com/us/eletronics/d, could have its slug translated to eletronicos for the pt-BR binding, as in http://{storename}.com/br/eletronicos/d.

Brand

Mutation

Fill in the main text box with the following mutation command:


_10
mutation translate($args:BrandInputTranslation, $locale:Locale){
_10
translateBrand(brand:$args,locale:$locale)
_10
}

Query Variables

According to the following example and explanations, fill in the Query Variables section with the desired translations of each parameter.


_10
{
_10
"args":{
_10
"id": "2000057",
_10
"name": "Calvin Klein",
_10
"text": "Esta é uma descrição da marca.",
_10
"siteTitle": "Calvin Klein",
_10
"keywords": "calvin klain"
_10
},
_10
"locale": "pt-BR"
_10
}

  • id: the brand ID. Every brand in your store has a unique ID that can be found under Catalog > Brands in the admin.
  • name: brand name.
  • text: brand description (meta tag description).
  • siteTitle: brand page title (tag title).
  • keywords: an object containing the translations of each substitute word of the brand.
  • locale: target translation locale.

Product

Mutation

Fill in the main text box with the following mutation command:


_10
mutation translate($args:ProductInputTranslation, $locale:Locale){
_10
translateProduct(product:$args,locale:$locale)
_10
}

Query Variables

According to the following example and explanations, fill in the Query Variables section with the desired translations of each parameter.


_15
{
_15
"args":{
_15
"id": "45",
_15
"name": "Câmera Retrô",
_15
"description": "Esta é uma descrição genérica deste produto.",
_15
"shortDescription": "Esta é uma breve descrição genérica deste produto.",
_15
"title": "Câmera Retrô - Store Components",
_15
"metaTagDescription": "Compre os melhores produtos em nossa loja",
_15
"linkId": "black-steel-film-camera",
_15
"keywords": [
_15
"lomografia",
_15
"vintage"]
_15
},
_15
"locale": "pt-BR"
_15
}

  • id: the product ID. Every product in your store has a unique ID that can be found under Catalog > Products and SKUs in the admin.
  • name: product name.
  • description: product description.
  • shortDescription: additional short description.
  • title: page title (tag title)
  • metaTagDescription: description (meta tag description).
  • keywords: an object containing the translations of each substitute word of the product.
  • linkId: the textLink (unless your store is a cross-border one, it must not be translated).
  • locale: target translation locale.

If your store is a cross-border one, keep in mind that the linkId is the slug used to build the product URL. Hence, an alias with the translated URL slug of this product will be automatically created in the Rewriter app for the binding associated with the target locale. The alias is stored in the resolveAs field of its related internal route in the Rewriter app. For example, a product registered under the blue-top-retro-camera slug, as in http://{storename}.com/us/blue-top-retro-camera/p, could have its slug translated to camera-retro-azul for the pt-BR binding, as in http://{storename}.com/br/camera-retro-azul/p.

SKU

Mutation

Fill in the main text box with the following mutation command:


_10
mutation translate($args:SKUInputTranslation, $locale:Locale){
_10
translateSKU(sku:$args,locale:$locale)
_10
}

Query Variables

According to the following example and explanations, fill in the Query Variables section with the desired translations of each parameter.


_10
{
_10
"args":{
_10
"id": "46",
_10
"name": "Mixer Retro - Marrom"
_10
},
_10
"locale": "pt-BR"
_10
}

  • id: the SKU ID. Every product in your store has a unique ID that can be found under Catalog > Products and SKUs in the admin.
  • name: the SKU name.
  • locale: target translation locale.

SKU or product specification

Mutation

Fill in the main text box with the following mutation command:


_10
mutation translate($args:FieldInputTranslation, $locale:Locale){
_10
translateField(field:$args,locale:$locale)
_10
}

Query Variables

According to the following example and the following explanations, fill in the Query Variables section with the desired translations of each parameter.


_10
{
_10
"args":{
_10
"fieldId": "31",
_10
"name": "Cor"
_10
},
_10
"locale": "pt-BR"
_10
}

Mutation

Fill in the main text box with the following mutation command:


_10
mutation translate($args:FieldValueInputTranslation, $locale:Locale){
_10
translateFieldValues(fieldValues:$args,locale:$locale)
_10
}

Query Variables

According to the following example and the following explanations, fill in the Query Variables section with the desired translations of each parameter.


_16
{
_16
"args": {
_16
"fieldId": "31",
_16
"fieldValuesNames":[
_16
{
_16
"id":"91",
_16
"name":"Azul"
_16
},
_16
{
_16
"id": "92",
_16
"name": "Vermelho"
_16
}
_16
]
_16
},
_16
"locale": "pt-BR"
_16
}

  • fieldId: the product or SKU specification field ID. Every product or SKU specification in your store has a unique ID that can be found following this orientation for SKU specifications or this orientation for product specifications.
  • fieldValuesNames: an object containing:
    • id: the specification value ID.
    • name: the specification value name.
  • locale: target translation locale.

Specification values ID can be found by running the following query:


_10
query{
_10
fieldValues(fieldId:"24"){
_10
fieldValueId
_10
value
_10
}
_10
}


_13
_13
*Where `fieldId` is the specification ID found following this [orientation for SKU specifications](https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ/6UjLHdAT5YLuflki10SXLr?locale=en) or this [orientation for product specifications](https://help.vtex.com/en/tracks/catalog-101--5AF0XfnjfWeopIFBgs3LIQ/4fcdmJzQ6QYA9zWf3bLWin).*
_13
_13
## Category group
_13
_13
### Mutation
_13
_13
Fill in the main text box with the following mutation command:
_13
_13
```gql
_13
mutation translate($args: GroupInputTranslation, $locale:Locale) {
_13
translateGroup(group: $args, locale:$locale)
_13
}

Query Variables

According to the following example and the following explanations, fill in the Query Variables section with the desired translations of each parameter.


_10
{
_10
"args":{
_10
"groupId": "14",
_10
"name": "Cores"
_10
},
_10
"locale": "pt-BR"
_10
}

  • groupId: the category group ID.
  • name: the category group name.
  • locale: target translation locale.

Category group IDs can be found by running the following query:


_10
query{
_10
groupsByCategory(categoryId:1){
_10
id
_10
name
_10
}
_10
}

Where categoryId is the ID of the category related to that group.

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page