I’ve been having a hard time getting images to show within the email templates. I’ve saved the images (JPEGs) I need to the media library, and I’m using the cdn url as the src of the img tag. This hasn’t been very reliable though as the images show up broken in some email clients. Is there a better way to pull images into the email templates that I don’t know about?
I can understand how adding images to your notification templates would be very useful to your store and that it can be confusing if the images don’t appear correctly on different email clients. I did some digging with our design team here to look into this more for you.
Do your images have any alt texts attached to them? The reason I ask, is because images may not show up when some email clients may have spam filters that can block out certain words included in alt texts. I recommend checking your alt text and also the filename if there are any words that could be blocked by a spam filter.
Another thing to check is if the email clients have any image limiters, such as when being viewed through a data connection that would limit the amount of images downloaded onto the device, in order to save data on someone’s device. It’s possible this is another reason why it may show up on one email client, but not another.
Here are other ways you can add an image to your email templates:
To add a logo, you can go into the Settings > Notification window and click on Customize, and upload your logo.
You can also add liquid coding to your template. This is outside our scope of support, however you can look at our liquid cheat sheet, here, and search “image” for the liquid variable that you can use to insert the filename of the images that you have uploaded onto your store.
Along with adding a logo and images through liquid, you can also follow our help doc on how you can customize the style of your templates with CSS/HTML, here: Edit notification templates.
If the image shows broken in the email client, usually it’s because you didn’t use an ABSOLUTE url. You MUST include the full https:// at the start of the image link. If it just starts with //, that will work on your website but it won’t work in an email. // on the website can “assume” that it is to use the same connection type, but in an email it has no idea so may not know where to go to really find it.