Roswell Studios

139 Fulton Street, Ste 132
New York, NY 10038

Uploading variant images to Shopify

— January 8, 2018

First, it is easier and generally preferable to do this in the product uploading import CSV.

But lets say the upload has already occurred, and now it is your problem to upload images to individual variants. You could log in, open the Javascript console, and run some api calls to do this.

[NOTE: this is just a guide for somebody reasonably familiar with Javascript to take and modify. Never execute things in the console that you don’t understand, and DOUBLE NEVER in the console for the admin page for your store. This could just as easily set all your products to free.]


var colorcodes ={
'503': 'AUBERGINE'
//and so on
}

function prodimgup (prodnum, variants, name, code) {
//get the variant id
var a = code.split('-');
var color = a[1];
var fname = a.join('');
var colortxt = colorcodes[color];
var variantid = 0;

for (var x = 0; x < variants.length; x++) { if (variants[x].title == colortxt) { variantid = variants[x].id; } } if (variantid == 0){return;} $.ajax({ url: '/admin/products/'+prodnum+'/images.json', type: 'POST', contentType: "application/json", dataType : 'json', async: false, data:JSON.stringify( { image:{ variant_ids:[variantid], src: "https://shopify.dev.roswellstudios.com/"+fname+'_front.jpg' } }) }) } }) } function getprod(name, codes) { return $.ajax({ url:'/admin/products.json', data:{fields:'id,variants,title',product_type:'master',title:name}, dataType : 'json', async: false, success: function(data) { $.each(data.products, function(i, product){//there should be only the one master type //add the image to the main product // and also to the variant corresponding to that color if (product.title == name) { $.each(codes, function(j, code){ prodimgup(product.id, product.variants, name, code); }) } }) } }) } var prods = {'BRIDESMAID GOWN':[ '510-001', '510-503', ]}; $.each(prods, getprod);

Things of note:

Shopify's search returns approximate matches. I know it is trying to be helpful, but for the code, it is a waste.

This isn't visible here, but the original client images were stored on a Windows server, and the case and spelling of the file names didn't match. (.jpg != .JPEG) I had to fix that first, by copying it to a real OS and normalizing the filenames.

The "async: false" is designed to slow it down. I'm not sure if Shopify cares, given their hardware, but it is generally polite to not run hundreds of thousands of api calls simultaneously. (The prods array was much bigger, obviously.)

Back to all