Shopify Translate & Adapt custom app translations support

Custom Data
1

I constantly get requests from our Merchants if our app support translation via the Translate & Adapt app from Shopify.

My current understanding is the following;

  • Shopify resources that implement HasPublishedTranslations are translateable via the app.
  • There is no way to create custom Resources with keys that can be translated and later queried by an app?

One approach I found to store app translations that merchants can translate is by adding Metafields on the Shop resource, they will show up on the app in the “Store metadata” section:

CleanShot 2024-10-26 at 09.51.32@2x
CleanShot 2024-10-26 at 09.51.32@2x1714Ă—870 59.9 KB

However this does not seem to be a good approach as there is no structure that will represent the objects in the app.

Is there a better approach that i’m missing? Would love to hear what other devs use to allow their apps to be translated by the merchant.

3 Likes
2

It depends on the content you want to translate but what you can do is

  1. Create a Metaobject definition for the content, where each piece of translatable content has a unique key, and is a type “single_line_text_field”. This will need translatable capability and admin PUBLIC_READ_WRITE access.
  2. Then create a metaobject for this definition with your content. You will want this content to be in the default language of the store.
  3. Then you can register any translations using translationsRegister - GraphQL Admin
  4. Gotcha is that you can’t register translations in the default store language so thats something to be aware of.
  5. Your customers will then be able to view this metaobject in translate and adapt app and translate it.
  6. You can view the content either using the admin api to view the translations or via storefront using a directive Storefront API reference
4 Likes
3

@JordanFinners thanks for the detailed suggestion!

I was aware that Metaobjects can be translated, but we cannot sync our full config objects as Metaobjects to Shopify, so we would have to create separate objects just for translation.

Have you seen apps doing it in this way, or have you done it yourself in this way?

4

Yeah I’ve done it this way previously.

Separating app content, all stored in a metaobject (or metafields if you’ve prefer that) which can then be translated by users.
Then the actual config your app needs can then be in a json metafield/metaobject, it also means you get better control over permissions.
The app config can all be private and content public.

5

@JordanFinners appreciate the input, good to know this setup works for you.

In our case we have objects that can have a dynamic number of fields, e.g a custom form definition with labels/help text, in that case we would need to create dynamic Metaobjects for each unique configuration of a merchant, and keep it in sync when the fields change.

Not sure if it’s worth the engineering effort, over just using a single metafield and building our own translation UI directly in the app :slight_smile:

Thanks again for your suggestion :+1:

1 Like