Shopify - Adding Image to Notification Emails

1
votes

I'm trying to add images of products that a customer has bought to the Order Confirmed email notification. I currently am using this as my attempt:

<img src="{{ line.line_item | img_url: 'small' }}">

I tried that based on this page. I also tried the following:

{{ item.product.featured_image | product_img_url | img_tag }}

Neither way worked. All I'm getting back is a placeholder image that says "no image" on it. This leads me to believe that my syntax is correct, but Shopify can't find the image I'm looking for. I set an image for the product in the admin page, and to make sure I have a big image and a smaller one, as well as set an image on the variant (although there is only the default, one variant for this product). None of it is working. Does anyone have any experience in this and can point me in the right direction?

Thanks!

2
emailshopifyliquid
You cannot add product images to emails. docs.shopify.com/manual/settings/notifications/email-variables – Funk Doc
In the default code for some of the emails, they included the above syntax and are the ones that gave me the idea of it. Thus, although it is not listed specifically on that page, I believe it can be used. Not by a specific attribute of line_items but by using the img_filter in some way. – pjlamb12
Here's an excerpt right from the default notification: <ul style="list-style-type:none"> {% for line in fulfillment.fulfillment_line_items %}<li> <img src="{{ line.line_item | img_url: 'small' }}" /> {{ line.quantity }}x {{ line.line_item.title }} </li>{% endfor %} </ul> – pjlamb12

2 Answers

0
votes

Thanks to the help of a coworker, we got this figured out. When looping through the line_items, do the following to get the image: <img src="{{ line.product.featured_image | product_img_url: 'thumb' }}"> and the image will output. There are a lot of different image sizes you can use in place of 'thumb'. Check those out here.

Hope this helps someone else!

0
votes

The default Order Confirmation email template uses the img_url filter:

{% for line in line_items %}
  <li>
    <img src="{{ line | img_url: 'small' }}" /> 
    {{ line.quantity }}x {{ line.title }} for {{ line.price | money }} each
  </li>
{% endfor %}

This is preferable to using line.product.featured_image because it will display the line item's variant image if one exists.

From the Shopify docs for img_url:

For line_item, the URL of the line item's variant image is returned. If the variant does not have an assigned image, the URL of the product's featured image is returned.

Alternatively, you could replace <img src="{{ line | img_url: 'small' }}" /> with any of these options that use the img_tag filter:

{{ line | img_url: 'small' | img_tag }} // my preferred option

{{ line | img_tag }} // default size is 'small'

{{ line | img_tag: 'alt text', 'class1', 'thumb' }} // thumbnail image with alt text and CSS class