How to upload an image via API to the Images section in the visual editor

ophinjay
Shopify Partner
7 0 4

In the visual editor that opens when I click on Online Store > Themes > Current Theme > Customize button, I have an option to upload an image and then use it in my page. These images return something called a shopify_url in the format shopify://shop_images/image.png. This shopify url is what is used in config/settings_data.json as image in the section. Is there a way for me to upload an image to shopify via API and get its corresponding shopify_url so that it can be used in the settings_data.json.

It does not look like you can directly upload an image to (the theme) assets via api. 

 

The end point only supports GET, PUT and DELETE requests:

https://help.shopify.com/en/api/reference/online-store/asset

0 Likes
ophinjay
Shopify Partner
7 0 4

This is not what I was looking for. In fact uploading an asset to the theme assets directory is possible using the PUT API that you mentioned. I also get a valid response as follows

 

 

{
    "asset": {
        "key": "assets/image_filename.png",
        "public_url": "https://cdn.shopify.com/s/files/1/1328/9138/6243/z/5/assets/image_filename.png?v=1234567890",
        "created_at": "2020-01-15T05:33:57-05:00",
        "updated_at": "2020-01-15T05:33:57-05:00",
        "content_type": "image/png",
        "size": 391414,
        "theme_id": 83742556300,
        "warnings": []
    }
}

 

 

The problem is that I'm not able to use that public_url inside settings_data.json to change my home page image. My settings_data.json has the value shopify:\/\/shop_images\/t-shirt-store.jpg for current.sections.hero.settings,image. When I try to change this value to the public_url from the above response, it gives me an error. What I wanted to know was how to upload an image to shopify and get its shopify:\/\/ url

I got confused on the first post, you are correct, uploading images to the theme assets is possible with a PUT request.

When you upload an image through Online Store > Customize Theme, it uploads the image to the files resource (/admin/settings/files) rather than the theme assets resource. Currently there is no API for the files resource.

 

The section settings/settings_data.json file only accepts files/images from the files resource. Since there is no way to upload images to the files resource via API, there is no way to upload images via API and use them section settings/settings_data.json file.

Jayantkverma
New Member
1 0 0

The API for following is not provided by Shopify yet

0 Likes
baberuth22
Excursionist
16 0 3

I think this was just added and announced at Unite 2021.    Anyone have an example of how to upload a new image to files?   I believe it requires GraphQL.

0 Likes

This can now be achieved via the filecreate mutation on the file api.

Make sure your API has permission to the read_files and write_files access scopes.

The above link shows an interactive example, I tested it out on a development store and it worked.

0 Likes
baberuth22
Excursionist
16 0 3

I test the code as well and it works.   

Screen Shot 2021-07-01 at 4.51.53 PM.png

Can we generate images from base-64 encoded attachment as well?   The REST Asset API allows this.

Screen Shot 2021-07-01 at 4.53.22 PM.png

I was using the REST Asset API to upload images, but we can't access the liquid image object in your template from asset images.   The files API solves this.  

0 Likes