How to show generated thumbnail at catalogue dynamically?

[Yoonjoo]

Hi, 

I'm building e-commerce app and having problem showing the thumbnail in the catalogue.

Concept of my app :

1. Customer upload their own image file

2. Our app will generate a logo with that uploaded file, 

3. We will then call Printful Mockup Generator API to generate a thumbnail of customised product. (FYI, product items are predefined)

4. We will replace predefined product thumbnail images to generated images.

5, Customer can then view the customised products at catalogue section.

I'm currently struggling with Step 4, is it possible to render the generated product thumbnail within catalogue in real time?

[SBD_]

Hey @Yoonjoo,

One approach would be to have an app proxy the request and use JavaScript to swap out the image on the frontend.

For example, the customer uploads their image to your server, you send it to Printful to get a preview, and return the preview URL to the client. 

[Yoonjoo]

Thank you @SBD_ for your reply. 

I checked app proxy and found out I can set ["apps", "a", "community", "tools"] as a subpath prefix, and I can set any sub path like "my-proxy-path".

As far as I understand , if I choose subpath prefix "apps" and have "my-proxy-path" as subpath, any requests to www. my-store.myshopify.com/apps/my-proxy-path/… will go to the URL that I have set up. 

 What I want to do is, show generated image at catalog (.../collections/all). In this case, I think I need to set proxy of /collections/all to handle change the catalog image. but there's only 4 options for subpath prefix.  how can I set /collections/all proxy ?  

(same problem for www.my-store.myshopify.com/products/{product.title}  as I want to change the product image their as well ) 

+ Is is possible to modify product object ? 

I'm currently using `simple` theme, and checked `product-grid-item.liquid` render the "product.featured_image". Can I modify product object's `image src` as generated thumbnail img between step 3 and 4 above?

[Yoonjoo]

Hi again, dunno how to edit the above question😅
I have one more related question, can i use product.metafields to store the generated image? How to POST the image file to metafields?

[SBD_]

Just to confirm, will the product images be different for each store, or each store customer?

[Yoonjoo]

It will be different for each store customer.
Origin products will be same, but product images will be replaced with each customer’s customized image.

[SBD_]

Thanks for clarifying. In that case it probably doesn't make sense to store the generated image in the product since it would affect other customers. You could use JavaScript to update the images on the fly. For example:

1. Page loads

2. Send a request to your app to get a custom image

3. Swaps out the product image for this custom image

4. Store the image URL in a line item property for reference

[den232]

I know this has been a year ... Is it possible to make this change the image shown to the user in the checkout page?  I have a similar problem with customized products and wish to show the customer his own product's image when he's about to pay up.   Confidence and all that, you know?

Any hope?  Thanks, jb