Adding Product Image to Confirmation Email

Highlighted
Excursionist
22 0 7

Hi All,

I seem to be having trouble figuring this one out.  This is the code we have now:

<p><b>Items ordered:</b></p>
<ul style="list-style-type:none">  {% for line in line_items %} <li> <img src="{{ line.product.featured_image | product_img_url: 'small' }}" /> {{ line.quantity }}x {{ line.title }} for {{ line.price | money }} each </li> {% endfor %}

Rather than displaying the variant image, it's displaying the product featured image. Should line.product.featured_image be something else?  (Or what should I change?)

Thanks for any tips you can give me!

Amanda

0 Likes
Highlighted
New Member
17 0 0

Try this

{% for line in line_items %}
<img src="{{ line | img_url: 'small' }}">
{% endfor %}

 

0 Likes
Highlighted
Excursionist
22 0 7

Thanks, Candela.

Unfortunately, it didn't work.  Using that code I get no photo instead of the wrong photo. 

0 Likes
Highlighted
New Member
17 0 0

Strange, how are you testing? with a real e-mail order or by clicking on the test mail button?

If its the later it won't work because the dummy product does not have a variant image. You need to test with a real order.

0 Likes
Highlighted
Excursionist
22 0 7

Yes, I tested it with a real oder and went through the entire checkout process as if I was a customer.  

I'm using the theme Minimal if that makes a difference?

 

 

0 Likes
Highlighted
New Member
6 0 0

Hello :)

Did you figure out what the problem was? I am having a similar problem, I do get the images in the Order Confirmation but not in the Shipping Confirmation.

I am using this code in the Order Confirmation:

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

and this one in the Shipping Confirmation.

{% for line in fulfillment.fulfillment_line_items %}<img src="{{ line.line_item | img_url: 'small' }}" />{{ line.quantity }}x {{ line.line_item.title }}<br>{% endfor %}

Thanks in advance for any tips! 

Cheers,

Markus

0 Likes
Highlighted
Tourist
3 0 4

I know this is an old thread & post but are you still using Klaviyo?  If so can you describe your overall satisfaction with them?  They're a tad bit expensive for a store our size(we have a lot of customer accounts) and I'm trying to gauge the impact they may have on our monthly sales as they relate to e-mail.  What is the feature you like most?  How effective has it been?

0 Likes
Highlighted
New Member
12 0 0

Hi Markus,

If it works for the order notification, it should work for the shipping confirmation too. 

Instead of 

{% for line in fulfillment.fulfillment_line_items %}<img src="{{ line.line_item | img_url: 'small' }}" />{{ line.quantity }}x {{ line.line_item.title }}<br>{% endfor %}

use the same code as in the order notification. Remove ".line_item" from line.line_item. 

{% for line in fulfillment.fulfillment_line_items %}<img src="{{ line | img_url: 'small' }}" />{{ line.quantity }}x {{ line.line_item.title }}<br>{% endfor %}

Hope that works. 

0 Likes
Highlighted
New Member
12 0 0

Hi Paul,

We use Klaviyo too. We use it to generate the HTML code for notification emails. We don't use it to send any emails. In this case, we don't pay any money. 

P

0 Likes
Highlighted
Excursionist
22 0 12

I figured this out! You have to add an image (using the Shopify merge tags) with HTML in the "source" section of Klaviyo; the Shopify merge tag is the source code for the image. Here's the code:

<img src="{{ line.product.featured_image | product_img_url: 'small' }}" />

The images attached show what it looks like in Klaviyo.

1 Like