What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

How to attach Image thumbnails to Draft Order w/ custom line items?

How to attach Image thumbnails to Draft Order w/ custom line items?

Milind2
Excursionist
25 0 13

Hi Everyone,

I am facing issue for adding thumbnail to the custom item created using draft order API and while searching for the solution I got following topic by @Ben_Hart :
https://community.shopify.com/c/Shopify-APIs-SDKs/How-to-attach-Image-thumbnails-to-Draft-Order-w-cu...

 

"I've created an app that uses the shopify draft order api to create a number of custom items based on interactions in the app, so that the customer can checkout their items using shopify.

I'd like to add image thumbnails to the items, ideally just by supplying a URL to the image file,  yet I can't seem to find a way to do this in the API reference.  (https://help.shopify.com/en/api/reference/orders/draftorder)

when Creating a draft order via API call using custom line items, rather than existing products, is there a way to add thumbnail images on those custom line items?"

This topic is posted on "09-19-2018" and till date there is no solution/reply posted on this topic.

When I contact to the shopify support, they says please post on community forum and our shopify experts will post solution there.

Now my question is "This is how we are going to get the solution?"

 

Please help here as soon as possible.

Replies 16 (16)

Alex
Shopify Staff
1561 81 343

At this time we do not support images being added to custom line items. Sorry we evidently didn't get to the prior thread at the time this was posted, otherwise your question might have been answered by now.

 

Cheers.

Alex | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Milind2
Excursionist
25 0 13

Thanks Alex for replying.

I would like to know if there any way to set thumbnail image on checkout page for Gold plan.

novawildstar
Visitor
1 0 4

Please fix this!   When making custom orders, it helps a lot.  Sometimes I have to use Etsy just so I can add the photo to the order / picklist, etc. 

baabak
Tourist
5 0 0

Hi Alex, and still shopify doesn't support it. There is a question, is it hard to make, or there is an issue? in this case there might be such an option in the future. or there is no intention to have it?

ShaneZen
Shopify Partner
6 0 8

Hi Alex,

Just adding my 2-cents that I ran into this today and it's lame. Hoping you will all fix this.

- Shane

mattholme
Shopify Partner
4 0 9

We would also like to request this feature. It does seem very strange to display the default product thumbnail for a custom line item when it is impossible to ever replace it with a real product thumbnail.

weidox
New Member
5 0 0

It is possible. Need to attach image to product (ProductImage API), create product variant with image_id (ProductVariant API), and then create draft order (DraftOrder API) based on variant_id (option1 is mandatory) and not product_id. Otherwise if draft order is being created directly from product without variant, it seems Shopify is internally creating a variant which does not get image linked.

mattholme
Shopify Partner
4 0 9

This appears to be directions on how to assign a thumbnail to a real product that is then attached to a draft order. What we're lacking is the ability to assign the thumbnail to a custom line item.

weidox
New Member
5 0 0

If my observations are right, that will never work due to how Shopify is designed. Images need to be uploaded separately to product (max 250 images), and from there they can be linked. Line item seems to be just a variant - so either you create variant manually where you have full control, or you try to create line item directly from product, which seems to be a shortcut of creating variant without image. I don't expect Shopify would change it's product structure to allow images from outside of product (otherwise that I guess could be security hole). Maybe if they do implement some new internal image storage which is not tied to product, but even then it would break the philosophy in how images are tied to products.

That said I don't see much difference in just uploading a new image to product and creating a variant with it (in my case I'm creating a new product too, so happily I don't need to worry about 250 images limit per product).

ShaneZen
Shopify Partner
6 0 8

weidox, Shopify allows a custom line item that is not associated with a variant or product, so they could just as easily figure out a way to associate an image with that line item. There are many reasons why someone might not want to create a new product for every custom line item.

weidox
New Member
5 0 0

Right, now noticed in documentation "To create a custom line item, provide the titlepricetaxable, and quantity properties." - did not realize that's completely without product. That way it would be not a trivial feature to make, given the way images are tied to products. A change in internal design if it ever comes. But as I did not notice this feature, I'm happy enough to create a new product, and thinking what would happen if I delete that product after sending invoice. If that works, it could be a workaround.

weidox
New Member
5 0 0

Moreover I'm finding that it's possible to delete product after order draft is created and then order line loses image, that gives another insight in how it works underneath. Having images for order lines without products would require even more reworking of existing stuff - which I don't think will happen. Instead I'll probably be deleting products once order is completed, automatically via webhooks, to have some cleanup.

Charlie-S
Shopify Partner
8 0 2

You could set the image URL on the line item's properties object, e.g. `{ items: [{ id: 1234, quantity: 1, properties: { previewImgUrl: "https://example.com/image.jpg" }] }` and then customize your theme to display this property as an image.

dnmichaelsen
Visitor
3 0 0

Hello Charlie,

 

When you say to customize your theme to display a property as an image, where does that happen?

 

Would it be with Checkout Extensibility?
Would that be only with Shopify Plus?

 

Thanks!

Charlie-S
Shopify Partner
8 0 2

Find the corresponding theme file (e.g. `cart-notification-product.liquid`) and display this property if it exists. For example: 

 

{%- if item.properties.previewImgUrl -%}
  <img src="{{ item.properties.previewImgUrl }}">
{%- endif -%}
 

 

See https://shopify.dev/docs/api/liquid/objects/line_item#line_item-properties for more details on line item properties.

dnmichaelsen
Visitor
3 0 0

Thank you for the quick reply Charlie.

 

I was hoping to be able to do that in the checkout line item.

For the moment I am creating the variant with a custom image and price just prior to the checkout.