Solved

Creating a metaobject that contains an image

st_consult
Shopify Partner
10 1 1

I am using Typescript and the GraphQL admin API in a Node.js application to create a metaobject definition and to create metaobjects of that definition. That works very well in general, except for images.

 

This is the field definition part that I use to define the image as a field of the metaobject:

    {
      key: 'image',
      name: 'My image',
      description: `An image`,
      type: 'file_reference',
      validations: [
        {
          name: 'file_type_options', //
          value: '["Image"]'
        }
      ],
      required: false
    }

 

 

I followed this documentation to upload image files. The result is that my image files are available on resourceUrls like this: https://shopify-staged-uploads.storage.googleapis.com/tmp/77518813149/products/some-uuid/myimage.jpg.

 

That's also cool. But now I don't understand how to programmatically get the uploaded images into my metaobjects.

It looks like this is only possible when creating products, but I would like to use the image for a metaobject. Also, using the Shopify admin UI, it is very simple to assign an already existing image to the field of one of these metaobject.

 

So what am I missing here?

 

In an ideal scenario, I would like to have an automated process that takes the images from my hard drive and pushes them into Shopify in such a way that they are available under `Content --> Files` and each image has a Shopify ID of the form "gid://shopify/MediaImage/34852281779213".

Accepted Solution (1)

st_consult
Shopify Partner
10 1 1

This is an accepted solution.

I finally found a good summary about what has to be done. It's really not just one or two steps.

View solution in original post

Replies 3 (3)

st_consult
Shopify Partner
10 1 1

I still would love to get an answer here. 😉

PatriciaHung
Shopify Partner
4 0 2

{{ your_metaobject_name.image | metafield_tag | replace: '<img', '<img class="your-class"' }}

st_consult
Shopify Partner
10 1 1

This is an accepted solution.

I finally found a good summary about what has to be done. It's really not just one or two steps.