Update Secondary Product Image - Shopify

Questions / Help
1

Thanks for improving Uploadcare. So surprised to see the image overlay feature I requested turned into reality!

I have followed your shopify integration guide, and get it working updating the Featured Product Image in shopify. However, how could I do something similar to other product images (say the secondary product image)?

p.s. read that we have to disable product zoom to make it works in the guide. Is there a workaround to make zoom works?

Thanks!
Jack

2

Hi @PTT_Jack

You’re welcome! However, I’m a bit confused – the overlay feature has been supported for a long time. Could you clarify what update you’re referring to?

As for the image zoom issue, it requires some research. Can you tell me a bit more about your requirements, please? Do you need the second product image to be updated in a different manner than the primary one?

3

Hi Alex,

Yes, we have been using your service way way back in the days, where overlay wasn’t implemented. I talked to your colleague wishing for overlay function, and just about recently I discovered that it’s actually implemented!

I have followed through your Shopify integration tutorial and got it working with the overlay function: https://uploadcare.com/docs/guides/shopify/

So now I am able to update Shopify product featured image after user’s upload together with overlaying picture frame over it like the tutorial. However, I would like to know if I could apply similar update to other product image as well (e.g. Say my product have two product images, the featured one is updated. Can I update the second one in similar manner?) I am using the same theme “Debut” as in the tutorial. Probably pointing me how to locate the proper tag for the second image as in the featured one will do:
var productImage = document.querySelector(’.product-featured-img’);
var secondImage = document.querySelector(’???’);

Secondly, as in the tutorial, I disabled the default “Debut” theme product image zoom function. However, just wondering is it something totally not possible to workaround it and have the default zoom function back? Or could you point me to some direction so I can try looking it up?

I am not an actual web developer, just know a bit of java, python and html. But I am willing to learn and research maybe with some guidance from you guys!

Thanks again