How to show generated thumbnail at catalogue dynamically?

Highlighted
New Member
4 0 0

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?

0 Likes
Shopify Staff
Shopify Staff
240 32 37

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. 

0 Likes
New Member
4 0 0

Thank you @scottydont 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?

 

 

 

0 Likes
New Member
4 0 0
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?
0 Likes
Shopify Staff
Shopify Staff
240 32 37

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

0 Likes
New Member
4 0 0
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.
0 Likes
Shopify Staff
Shopify Staff
240 32 37

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

0 Likes