Documentation
Feedback
Guides
Storefront Development

Storefront Development
Storefront Development

Translating Catalog content

Learn how to overwrite automatic message translations from the Catalog.

In this guide, you'll learn how to overwrite an automatic message translation from your store's Catalog, such as product names and descriptions. By following these instructions, you can provide more specific content in different languages.

Catalog messages are translatable text strings associated with the store catalog. These messages are stored externally within the Catalog API, which manages your store's sales channels, categories, brands, products, SKUs, and specifications.

Below is a list of Catalog API settings that automatically translate based on the user's locale:

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

To ensure accuracy and brand consistency, you can customize VTEX automatic translations to reflect cultural nuances or specific terminology that aligns with your brand. This process involves following the instructions provided below, using the catalog-graphql app, which serves as the GraphQL interface for the Catalog API.

If your store uses catalog translation overrides via Messages service (vtex.messages), you can check if a manual translation exists by running a query in Messages GraphQL. Learn more in the section Checking catalog message translations of the Overwriting the Messages app guide.

Instructions

To translate text messages from your store's Catalog, follow these steps:

  1. Install the vtex.admin-graphql-ide@3.x app using your terminal.
  2. In the VTEX Admin, go to Store Settings > Storefront > GraphQL IDE.
  3. From the dropdown list, choose the vtex.catalog-graphql app.
  4. Click Query variables at the bottom of the page.

{"base64":"  ","img":{"width":1230,"height":682,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1248012,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Storefront-Guides/images/graphql-ide.gif"}}

  1. Based on your scenario, check the sections (category, brand, product, SKU, SKU or product specification, specification values) for guidance on how to complete the main text box and the Query variables section.
  2. After adjusting your query, click the play button to run the declared mutation. The expected response is a boolean value indicating true.

Below is an example of the complete process for the automatic translation of a product name:

{"base64":"  ","img":{"width":1460,"height":997,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1495214,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/docs/guides/vtex-io/Storefront-Guides/images/graphql-ide-catalog.gif"}}

Translatable settings

See how to complete the main text box and the Query variables section when configuring your catalog translation.

Category

Mutation

Complete 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

Complete the Query variables section with the desired translations for each parameter.


_14
{
_14
"args":{
_14
"id": "3",
_14
"name": "Eletrônicos",
_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: Category ID. Every category in your store has a unique ID, which can be found under Catalog > Categories in the VTEX Admin.
  • name: Category name.
  • title: Meta title for the category page.
  • description: Detailed description of the category.
  • keywords: Object containing the translations of each similar word for the category.
  • linkId: The textLink (must not be translated unless your store is cross-border).
  • locale: Target translation locale.

If you have a cross-border store, the linkId serves as the category URL slug. The Rewriter app will automatically create an alias using the translated slug for each target locale and store it in the resolveAs field for that locale's internal route. For example, a category with the slug electronics at http://{storename}.com/us/electronics/d could have the translated slug eletronicos for the pt-BR binding, as in http://{storename}.com/br/eletronicos/d.

Brand

Mutation

Complete 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

Complete the Query variables section with the desired translations for 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 klein"
_10
},
_10
"locale": "pt-BR"
_10
}

  • id: Brand ID. Every brand in your store has a unique ID that can be found under Catalog > Brands in the VTEX Admin.
  • name: Brand name.
  • text: Brand description (meta tag description).
  • siteTitle: Brand page title (tag title).
  • keywords: Object containing the translations of each similar word for the brand.
  • locale: Target translation locale.

Product

Mutation

Complete 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

Complete the Query variables section with the desired translations for 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: Product ID. Every product in your store has a unique ID, which can be found under Catalog > Products and SKUs in the VTEX Admin.
  • name: Product name.
  • description: Product description.
  • shortDescription: Additional short description.
  • title: Page title (tag title)
  • metaTagDescription: Description (meta tag description).
  • keywords: Object containing the translations of each similar word for the product.
  • linkId: The textLink (must not be translated unless your store is cross-border).
  • locale: Target translation locale.

If you have a cross-border store, the linkId serves as the product URL slug. The Rewriter app will automatically create an alias using the translated slug for each target locale and store it in the resolveAs field for that locale's internal route. For example, a product with the slug blue-top-retro-camera at http://{storename}.com/us/blue-top-retro-camera/p could have the translated slug camera-retro-azul for the pt-BR binding, as in http://{storename}.com/br/camera-retro-azul/p.

SKU

Mutation

Complete 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

Complete the Query variables section with the desired translations for each parameter.


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

  • id: SKU ID. Every product in your store has a unique ID, which can be found under Catalog > Products and SKUs in the VTEX Admin.
  • name: SKU name.
  • locale: Target translation locale.

SKU or product specification

Mutation

Complete 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

Complete the Query variables section with the desired translations for each parameter.


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

  • fieldId: The ID for a product or SKU specification. Every product or SKU specification in your store has a unique ID, which can be found following the instructions for SKU specifications or product specifications.
  • name: Specification name.
  • locale: Target translation locale.

Specification values

Mutation

Complete 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

Complete the Query variables section with the desired translations for 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 ID for a product or SKU specification. Every product or SKU specification in your store has a unique ID, which can be found following the instructions for SKU specifications or product specifications.
  • fieldValuesNames: An array of objects, where each object contains:
  • id: Specification value ID.
  • name: Specification value name.
  • locale: Target translation locale.

You can retrieve ID values by running the following query:


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

Where fieldId is the specification ID, which you can find by following the guide Products and SKU Specifications.

Contributors
2
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
2
Photo of the contributor
Photo of the contributor
Was this helpful?
Suggest edits (GitHub)
On this page