How to translate product variants options "name" and "value" using GraphQL?

[Francois_paris]

Hi!
How do I translate products variants options "name" and "value" using GraphQL?
In exemple, let's say I have a specific product whose ID is 8822551261297
One the variants of this product is "Color" : "Red".
How do I translate "Color" (variant option name) and "Red (varianty option value) into another language, with GraphQL?
I managed to translate everything related to the product (title, description…) using GraphQL but I can't find anything on the documentation on how to translate products variants options name + value.

I found that the PRODUCT_VARIANT and PRODUCT_OPTION translatableResources is displaying the translatable details but it does not allow me to target a specific product?

[Liam · Accepted solution]

Hi Francois,

You should be able to use the `translationsRegister` mutation with the product option ID, which will then let you assign translations of the variant options. You can get the product option ID by querying the product and retrieving the ID of the option you want to translate.

Hope this helps,

[Francois_paris]

Thank you Liam, I managed to to it by:

- Querying product options + product variants

- Get the key and digest of each translatable content

- Use mutation translationsRegister to translate each element

[Liam]

Great to hear this has worked for you Francois!

[Francois_paris]

Actually, I managed to translate the product option "name" (ex: "color") and I thought I would translate the product option "values" the same way, but it does not work. I can't find any way to translate the option values (in ex. "red", "green" etc.).

If I use the ProductVariant object to translate this option value, it does not work.

When I query the Product object I can get the options values, but then those values are not within the TranslatableResource query…

ProductOption object is only helpful to translate option names ("color"), not values ("red")

I found this object but it's only in the unstable API version: https://shopify.dev/docs/api/admin-graphql/unstable/objects/ProductOptionValue

Do you know how I can translate product options values with GraphQL admin API? Is it even possible?

[AlexisBreuil]

Hi François,
For me it is the opposite. I found a way to update the values of the options (red, rouge) but not the name (color, couleur).
Can you give more details about how you did it?
I guess I messing up with option gid, im using: gid://shopify/Product/{product_id}/ProductOption/{option_id}

for the options values I did as follow using php:
 - get your variant gid

 - get the translatableContentDigest

$query = '
    query {
      translatableResource(resourceId: "' . $gid . '") {
        translatableContent {
          key
          value
          digest
          locale
        }
      }
    }';

 - use translationsRegister

$query = '
    mutation CreateTranslationPerGid($id: ID!, $translations: [TranslationInput!]!) {
      translationsRegister(resourceId: $id, translations: $translations) {
        userErrors {
          message
          field
        }
        translations {
          locale
          key
          value
        }
      }
    }';

$variables = [
    'id'           => $variantGid,
    'translations' => [
        [
           "key" => 'option1',
           "value" => 'Rouge',
           "locale" => 'fr',
           "translatableContentDigest" => b1f51a511f1da0cd348b8f8598db32e61cb963e5fc69e2b41485bf99590ed75a
        ]
    ]
];

[AlexisBreuil]

ok I found the answer.
The gid to use for options names is gid://shopify/ProductOption/{option_id}

[Francois_paris]

Hi Alexis,

Yes exactly, once you use the options names GID it should be same pattern as the option values.

On my side, I tried the same way as you did, to translate the option values… but when I do, instead of translating the existing values, it creates a new ones. So in English in exemple, I have a new product option "red" in addition to the existing "rouge", which is very weird. I checked and I use the correct translatable digest for the related element. I probably did something wrong and I will get back to it.

Thanks for your helpful exemple

Best,

François

[Francois_paris]

I looked at it more in details.

Do you use the same option value for multiple variants of the same product?

Because my theory is that when we use the exact same option value multiple times for multiples variants of the same product, let's say in exemple "Red" for a t-shirt with same color but different sizes: XS/Red, S/Red, M/Red etc.
It seems that in this scenario, Shopify is merging the option values into a unique value shared between several variants (in our exemple: "red"). That's why in the Shopify translate app we only see one occurence of "red" that we need to translate.

If I translate each occurence of "Red" in each variant using the exact same method as you, then my translations are duplicated and my product page looks weird with multiple occurences of the same option value (see screenshot attached of the back end --> translation page)

I don't know how to translate this merged variant option value and how to get the translatable digest for this unique merged value shared between the variants.

I believe this translatable resource is not linked to the variant but to the ProductOptionValue object, which is not translatable yet, apart from the developer preview: https://shopify.dev/docs/api/admin-graphql/unstable/objects/ProductOptionValue

I would be glad to be wrong and if anyone has a working solution to this, I would be happy 🙂

[AlexisBreuil]

My case was not as complex as yours 😃

I don't understand why you have two identical options.

You are supposed to have:
 - Option1 => color
 - Option2 => paper quality

Then it displays
 - Red/Premium
 - Red/Basic
 - Blue/Premium
 - Blue/Basic

The translatableContentDigest is a sha256 encoding of the value you want to translate, therefore Red/Premium and Blue/Premium have the same translatableContentDigest. This should be coherent because in the end, options values are unique.

[bambopanda]

When using version 2024-04 to retrieve the translatableResource information of a product variant, I receive an error stating "Invalid Id." The gid I am using has the following format: gid://shopify/ProductVariant/{variant_id}. 

Details as follows:

{
  translatableResource(resourceId: "gid://shopify/ProductVariant/{variant_id}"){
    resourceId
    translatableContent{
      digest
      key
      locale
      type
      value
    }
  }

And i got follow error:

{
  "errors": [
    {
      "message": "invalid id",
      "locations": [
        {
          "line": 2,
          "column": 3
        }
      ],
      "path": [
        "translatableResource"
      ]
    }
  ],
  "data": {
    "translatableResource": null
  },
  "extensions": {
    "cost": {
      "requestedQueryCost": 2,
      "actualQueryCost": 1,
      "throttleStatus": {
        "maximumAvailable": 2000,
        "currentlyAvailable": 1999,
        "restoreRate": 100
      }
    }
  }
}​

[kristjan]

Same problem here, I am unable to figure out how to get those translate digest ids for Options / Values for a Product/Variant.. anyone figure out how to query those based on Product Id or Variant Id?  If I use the translatableResources with PRODUCT_OPTION / PRODUCT_OPTION_VALUES , I just get long list of duplicated entries and have no clue which Size is for Cloths or other type of products.

[AlexisBreuil]

hi!
Did you try gid://shopify/Product/{product_id}/ProductOption/{option_id} for options values
and gid://shopify/ProductOption/{option_id} for options names?

[bambopanda]

I've tried and successfully retrieved the names of options, but currently, we're not using ProductOptions and instead, we're using ProductVariant. I'm not sure if this is a bug in Shopify, but in version 2024-01, we were still able to use the query to retrieve translatable information of ProductVariant.
Sorry for my poor English 😅

[kristjan]

Well the main problem is to find the right Option_id value 😄  If I list all Product_Options, i get long list of same Options values that have been assigned to different products, so I kinda need to know what options are within the product so I know which ids and digest to send with the translate request.  So its more of .. what call do I use to get Product and all its Options and Values ids so I can query the digest value

[ShopifyDevSup]

Hi @bambopanda ,

Starting in API version 2024-04 PRODUCT_VARIANT is no longer a valid translatable resource type, it's been replaced with PRODUCT_OPTION_VALUE so the resource ID's being passed in would need to be different as well.

There's a deprecation notice that provides a little more detail in the description for the PRODUCT_VARIANT value for the TranslatableResourceType enum dev docs in API version 2024-01 [dev docs link] which explains it like this:

An online store product variant. Translatable fields: option1, option2, option3. PRODUCT_VARIANT is deprecated, it is no longer a translatable resource type. Use PRODUCT_OPTION_VALUE instead.

If you'd like to discuss this change further in the forums it's recommended that you post in the "New GraphQL Product APIs" discussion board instead which is more focused on this topic.

[kristjan]

I found the query I was looking for, this gives me the ids for Options and Values, that I can then use to get the translate resource digest code that is needed to send translation for option/values for single product..

query { product(id: "gid://shopify/Product/7763887489124") { id title options { id name optionValues { id name } } } }

[bambopanda]

Hi @ShopifyDevSup 
Thank you for your response.