Documentation
Feedback
Guides
Storefront Development

Storefront Development
Store FrameworkHandling internationalizationTranslating Catalog content
Translating Catalog content

Overwrite automatic message translations from the catalog with more representative content from your store.

In this guide, you'll 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.

Catalog messages are translatable text strings related to a store catalog, stored as external data in the Catalog API, which manages a store's sales channels, categories, brands, products, SKUs, and specifications.

The following list includes the translatable Catalog API settings, which can be automatically translated into different languages based on the user locale.

  • 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 (similar 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.

Considering literal translations and cultural factors, you may want to overwrite automatic translations with content that is specific and representative of your store. This can be done through the catalog-graphql app, which is the GraphQL interface of the Catalog API, by following the instructions below.

Instructions

To translate text messages from your store catalog, follow these steps:

  1. Install the vtex.admin-graphql-ide@3.x app using your terminal.
  2. In the Admin VTEX, 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 orientations 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 of 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 eletronics at http://{storename}.com/us/eletronics/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 klain"
_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 object containing:

  • 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 following the guide Products and SKU Specifications.

Category group

Mutation

Complete the main text box with the following mutation command:


_10
mutation translate($args: GroupInputTranslation, $locale:Locale) {
_10
translateGroup(group: $args, locale:$locale)
_10
}

Query variables

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


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

  • groupId: Category group ID.

  • name: Category group name.

  • locale: Target translation locale.

    You can retrieve category group IDs 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