Issue with Klavyo email templates

sndshp
New Member
4 0 0

Hey Everyone!

I'm having an issue with my email templates in Klaviyo. I'm using four templates: "Refund has been issued," "Your order has shipped," "Your order has been delivered," and "Thanks for your purchase."

When I conduct test orders, the emails I receive show "No Image" instead of the product image that should be displayed.

Screenshot 2024-05-27 at 06.31.05.jpgScreenshot 2024-05-27 at 06.31.44.jpg

This problem doesn't occur with all products; for some, everything works perfectly fine (e.g., Adidas Vintage Trackpants).

Screenshot 2024-05-27 at 06.31.23.jpgScreenshot 2024-05-27 at 06.31.55.jpg

I believe the issue lies with the image URLs. I used ChatGPT to help solve this problem, and it suggested adding the following code to my templates to verify if the links work properly:

 

<p><a href="{{ line_item.image.src | img_url: 'medium' }}">Check image link</a></p>

 

When I purchase the linked product above and click on the "Check image link" button, I can see the image in the browser. However, when I use the same approach with other products, I still get the "No Image" message.

Interestingly, the rest of the templates I created with Shopify display the images perfectly fine.

Screenshot 2024-05-27 at 06.30.42.jpg

I've already reached out to Klaviyo and Shopify Support, but they weren't able to assist me.

I would appreciate any help or suggestions to resolve this issue!

Thanks in advance!

BTW here is my Web-site password: Snd.Shp.2023

Replies 4 (4)

sndshp
New Member
4 0 0

Here is my email template code: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>
</title>
<!--[if !mso]><!-->
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<!--<![endif]-->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css" data-inliner="ignore">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!--><!--<![endif]-->
<style>a:link {color:#1a1a1a;font-weight:normal;text-decoration:underline;font-style:normal}
a:visited {color:#1a1a1a;font-weight:normal;text-decoration:underline;font-style:normal}
a:active {color:#1a1a1a;font-weight:normal;text-decoration:underline;font-style:normal}
a:hover {color:#1a1a1a;font-weight:normal;text-decoration:underline;font-style:normal}</style><style>@import url(https://static-forms.klaviyo.com/fonts/api/v1/SzXfrk/custom_fonts.css);
#outlook a {
padding: 0
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}
table, td {
border-collapse: collapse;
mso-table-lspace: 0;
mso-table-rspace: 0
}
img {
border: 0;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic
}
p {
display: block;
margin: 13px 0
}
@media only screen and (min-width: 480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%
}
}
.moz-text-html .mj-column-per-100 {
width: 100% !important;
max-width: 100%
}
@media only screen and (max-width: 480px) {
div.kl-row.colstack div.kl-column {
display: block !important;
width: 100% !important
}
}
.hlb-subblk td {
word-break: normal
}
@media only screen and (max-width: 480px) {
.hlb-wrapper .hlb-block-settings-content {
padding: 9px !important
}
.hlb-logo {
padding-bottom: 9px !important
}
.r2-tbl {
width: 100%
}
.r2-tbl .lnk {
width: 100%
}
.r2-tbl .hlb-subblk:last-child {
padding-right: 0 !important
}
.r2-tbl .hlb-subblk {
padding-right: 10px !important
}
.kl-hlb-stack {
display: block !important;
width: 100% !important;
padding-right: 0 !important
}
.kl-hlb-stack.vspc {
margin-bottom: 9px
}
.kl-hlb-wrap {
display: inline-block !important;
width: auto !important
}
.kl-hlb-no-wrap {
display: table-cell !important
}
.kl-hlb-wrap.nospc.nospc {
padding-right: 0 !important
}
}
@media only screen and (max-width: 480px) {
.component-wrapper .mob-no-spc {
padding-left: 0 !important;
padding-right: 0 !important
}
}
@media only screen and (max-width: 480px) {
.kl-text {
padding-right: 18px !important;
padding-left: 18px !important
}
}
@media only screen and (max-width: 480px) {
.kl-split-subblock.top .spacer, .kl-split-subblock.bottom .spacer {
padding: 0 !important
}
.kl-split-subblock.top .spacer {
padding-bottom: 9px !important
}
.kl-split-subblock.top {
display: table-header-group !important;
width: 100% !important
}
.kl-split-subblock.bottom {
display: table-footer-group !important;
width: 100% !important
}
}
@media only screen and (max-width: 480px) {
.kl-table-subblock.use-legacy-mobile-padding {
padding-left: 9px !important;
padding-right: 9px !important
}
}
@media only screen and (max-width: 480px) {
td.kl-img-base-auto-width {
width: 100% !important
}
}
@media screen and (max-width: 480px) {
.kl-sl-stk {
display: block !important;
width: 100% !important;
padding: 0 0 9px !important;
text-align: center !important
}
.kl-sl-stk.lbls {
padding: 0 !important
}
.kl-sl-stk.spcblk {
display: none !important
}
}
@media only screen and (max-width: 480px) {
table.mj-full-width-mobile {
width: 100% !important
}
td.mj-full-width-mobile {
width: auto !important
}
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
max-width: 100%
}
.root-container {
background-repeat: repeat !important;
background-size: auto !important;
background-position: left top !important
}
.root-container-spacing {
padding-top: 50px !important;
padding-bottom: 20px !important;
font-size: 0 !important
}
.content-padding {
padding-left: 0 !important;
padding-right: 0 !important
}
.content-padding.first {
padding-top: 0 !important
}
.content-padding.last {
padding-bottom: 0 !important
}
@media only screen and (max-width: 480px) {
td.mobile-only {
display: table-cell !important
}
div.mobile-only {
display: block !important
}
table.mobile-only {
display: table !important
}
.desktop-only {
display: none !important
}
}
@media only screen and (max-width: 480px) {
.table-mobile-only {
display: table-cell !important;
max-height: none !important
}
.table-mobile-only.block {
display: block !important
}
.table-mobile-only.inline-block {
display: inline-block !important
}
.table-desktop-only {
max-height: 0 !important;
display: none !important;
mso-hide: all !important;
overflow: hidden !important
}
}
p {
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
padding-bottom: 1em
}
@media only screen and (max-width: 480px) {
.kl-text > div, .kl-table-subblock div, .kl-split-subblock > div {
font-size: 14px !important;
line-height: 1.3 !important
}
}
h1 {
color: #1a1a1a;
font-family: Helvetica, Arial, sans-serif;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 1.1;
letter-spacing: 0;
margin: 0;
margin-bottom: 20px;
text-align: left
}
@media only screen and (max-width: 480px) {
h1 {
font-size: 40px !important;
line-height: 1.1 !important
}
}
h2 {
color: #1a1a1a;
font-family: Helvetica, Arial, sans-serif;
font-size: 28px;
font-style: normal;
font-weight: 400;
line-height: 1.1;
letter-spacing: 0;
margin: 0;
margin-bottom: 16px;
text-align: left
}
@media only screen and (max-width: 480px) {
h2 {
font-size: 32px !important;
line-height: 1.1 !important
}
}
h3 {
color: #1a1a1a;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 1.1;
letter-spacing: 0;
margin: 0;
margin-bottom: 12px;
text-align: left
}
@media only screen and (max-width: 480px) {
h3 {
font-size: 24px !important;
line-height: 1.1 !important
}
}
h4 {
color: #1a1a1a;
font-family: "Helvetica Neue", Arial;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 1.1;
letter-spacing: 0;
margin: 0;
margin-bottom: 9px;
text-align: left
}
@media only screen and (max-width: 480px) {
h4 {
font-size: 18px !important;
line-height: 1.1 !important
}
}
@media only screen and (max-width: 480px) {
.root-container {
width: 100% !important
}
.root-container-spacing {
padding: 10px !important
}
.content-padding {
padding-left: 0 !important;
padding-right: 0 !important
}
.content-padding.first {
padding-top: 0 !important
}
.content-padding.last {
padding-bottom: 0 !important
}
.component-wrapper {
padding-left: 0 !important;
padding-right: 0 !important
}
}</style></head>
<body style="word-spacing:normal;background-color:#f7f7f7;">
<div class="root-container" id="bodyTable" style="background-color:#f7f7f7;">
<div class="root-container-spacing">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="kl-section" role="presentation" style="width:100%;">
<tbody>
<tr>
<td>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="kl-section-outlook" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;border-radius:0px 0px 0px 0px;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;border-radius:0px 0px 0px 0px;">
<tbody>
<tr>
<td style="border:solid 2px #000000;direction:ltr;font-size:0px;padding:20px 0;padding-bottom:9px;padding-left:13px;padding-right:13px;padding-top:9px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><![endif]-->
<div class="content-padding first">
<!--[if true]><table border="0" cellpadding="0" cellspacing="0" width="570" style="width:570px;direction:ltr"><tr><![endif]-->
<div class="kl-row colstack" style="display:table;table-layout:fixed;width:100%;">
<!--[if true]><td style="vertical-align:top;width:570px;"><![endif]-->
<div class="kl-column" style="display:table-cell;vertical-align:top;width:100%;">
<div class="mj-column-per-100 mj-outlook-group-fix component-wrapper hlb-wrapper" style="font-size:0px;text-align:left;direction:ltr;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;" width="100%">
<tbody>
<tr>
<td class="hlb-block-settings-content" style="vertical-align:top;padding-top:8px;padding-right:40px;padding-bottom:8px;padding-left:40px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="top" class="kl-header-link-bar" style="font-size:0px;padding:0px 0px 0px 0px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" style="color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;border:0;" width="100%">
<tbody>
<tr>
<td align="center" class="hlb-logo" style="display:table-cell;width:100%;padding-bottom:0px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<!--[if true]><td style="width:110px;" bgcolor="transparent"><![endif]-->
<!--[if !true]><!--><td style="width:110px;"><!--<![endif]-->
<a href="https://sndshop.de/" style="color:#1a1a1a; font-style:normal; font-weight:normal; text-decoration:underline" target="_blank">
<img alt="" src="https://d3k81ch9hvuctc.cloudfront.net/company/SzXfrk/images/b1013383-d0b9-4dd4-8775-4bf00b11c4df.png" style="display:block;outline:none;text-decoration:none;height:auto;width:100%;background-color:transparent;" width="110"/>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;" width="100%">
<tbody>
<tr>
<td class="" style="background-color:#844C1E;vertical-align:top;padding-top:18px;padding-right:18px;padding-bottom:18px;padding-left:18px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:0px;word-break:break-word;">
<p style="padding-bottom:0; border-top:solid 1px #CCC; font-size:1px; margin:0 auto; width:100%">
</p>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px #CCCCCC;font-size:1px;margin:0px auto;width:534px;" role="presentation" width="534px" ><tr><td style="height:0;line-height:0;"> &nbsp;
</td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mj-column-per-100 mj-outlook-group-fix component-wrapper kl-text-table-layout" style="font-size:0px;text-align:left;direction:ltr;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;" width="100%">
<tbody>
<tr>
<td class="" style="vertical-align:top;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="left" class="kl-text" style="font-size:0px;padding:0px;padding-top:16px;padding-right:20px;padding-bottom:0px;padding-left:20px;word-break:break-word;">
<div style="font-family:Helvetica, Arial, sans-serif;font-size:16px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.3;text-align:left;color:#1a1a1a;"><h1 style="text-align: center;">Thanks for your purchase!</h1></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mj-column-per-100 mj-outlook-group-fix component-wrapper kl-text-table-layout" style="font-size:0px;text-align:left;direction:ltr;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;" width="100%">
<tbody>
<tr>
<td class="" style="vertical-align:top;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="left" class="kl-text" style="font-size:0px;padding:0px;padding-top:0px;padding-right:40px;padding-bottom:20px;padding-left:40px;word-break:break-word;">
<div style="font-family:Helvetica, Arial, sans-serif;font-size:16px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.3;text-align:left;color:#1a1a1a;"><div style="text-align: center;">This email is to confirm your order on {{ date | date: "%m/%d/%Y" }}. Your order number is <strong>{{ order_number }}</strong>.</div></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;" width="100%">
<tbody>
<tr>
<td class="" style="vertical-align:top;padding-top:16px;padding-right:40px;padding-bottom:16px;padding-left:40px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="left" class="kl-split" style="font-size:0px;padding:0px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"><!--[if true]><table role="presentation" width="100%" style="all:unset;opacity:0;"><tr><![endif]-->
<!--[if false]></td></tr></table><![endif]-->
<div style="display:table;width:100%;">
<!--[if true]><td vertical-align="top" width="50%"><![endif]-->
<!--[if !true]><!--><div class="kl-split-subblock top" style="display:table-cell;vertical-align: top;width:50%"><!--<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="spacer" style="padding-left:0px;padding-right:12px;" vertical-align="top">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td>
<div style="font-family:Helvetica, Arial, sans-serif;font-size:16px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.3;text-align:left;color:#1a1a1a;"><div>
<p>Billing Address:</p>
<p style="padding-bottom:0">{{ billing_address.name }}<br/>{{ billing_address.street }}<br/>{{ billing_address.city }}, {{ billing_address.province }} {{ billing_address.zip }}<br/>{{ billing_address.country }}</p>
</div></div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if !true]><!--></div><!--<![endif]-->
<!--[if true]></td><![endif]-->
<!--[if true]><td vertical-align="top" width="50%"><![endif]-->
<!--[if !true]><!--><div class="kl-split-subblock bottom" style="display:table-cell;vertical-align: top;width:50%"><!--<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td class="spacer" style="padding-left:12px;padding-right:0px;" vertical-align="top">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td>
<div style="font-family:Helvetica, Arial, sans-serif;font-size:16px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.3;text-align:left;color:#1a1a1a;"><div>{% if requires_shipping %}
<h4>Shipping Address:</h4>
<p style="padding-bottom:0">{{ shipping_address.name }}<br/>
{{ shipping_address.street }}<br/>
{{ shipping_address.city }}, {{ shipping_address.province }} {{ shipping_address.zip }}<br/>
{{ shipping_address.country }}</p>
{% endif %}</div></div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if !true]><!--></div><!--<![endif]-->
<!--[if true]></td><![endif]-->
</div>
<!--[if true]></tr></table><![endif]--></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mj-column-per-100 mj-outlook-group-fix component-wrapper kl-text-table-layout" style="font-size:0px;text-align:left;direction:ltr;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;" width="100%">
<tbody>
<tr>
<td class="" style="vertical-align:top;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="left" class="kl-text" style="font-size:0px;padding:0px;padding-top:8px;padding-right:40px;padding-bottom:0px;padding-left:40px;word-break:break-word;">
<div style="font-family:Helvetica, Arial, sans-serif;font-size:16px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.3;text-align:left;color:#1a1a1a;"><h4>Order Details:</h4></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;" width="100%">
<tbody>
<tr>
<td class="" style="vertical-align:top;padding-top:0px;padding-right:40px;padding-bottom:16px;padding-left:40px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="left" class="kl-table" style="font-size:0px;padding:0px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" style="color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:fixed;width:100%;border:none;" width="100%">
{% if line_items %}
<thead>
<tr>
<th class="kl-table-subblock" style="width:25%;overflow:hidden;padding-top:4px;padding-right:0px;padding-bottom:4px;padding-left:0px;">
<div style="font-family:Helvetica, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.3;text-align:right;color:#1A1A1A;"></div>
</th>
<th class="kl-table-subblock" style="width:75%;overflow:hidden;padding-top:4px;padding-right:0px;padding-bottom:4px;padding-left:0px;">
<div style="font-family:Helvetica, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.3;text-align:left;color:#1A1A1A;"></div>
</th>
</tr>
</thead>
<tbody>
{% for line in line_items %}


<tr>
<td class="kl-table-subblock" style="width:25%;overflow:hidden;border-top:solid 1px #eeeeee;vertical-align:top;padding:8px 10px 8px 0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="right" style="font-size:0px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="border:0;padding:0;width:200px;" valign="top">
<img alt="line.title" src="{{ line.product.featured_image | product_img_url: 'medium' }}" style="display:block;outline:none;text-decoration:none;height:auto;font-size:13px;width:100%;" title="line.title" width="200"/>
<p style="margin: 10px 0 0 0; text-align: center;">
<a href="{{ line.product.featured_image | product_img_url: 'medium' }}" target="_blank" style="color:#0000EE; text-decoration:underline;">Check Image Link</a>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
<td class="kl-table-subblock" style="width:75%;overflow:hidden;border-top:solid 1px #eeeeee;vertical-align:top;padding-top:8px;padding-right:10px;padding-bottom:8px;padding-left:0px;">
<div style="font-family:Helvetica, Arial, sans-serif;font-size:16px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.3;text-align:left;color:#1a1a1a;"><div style="text-align:left;"><h3>{{ line.title }}</h3>
<p style="padding-bottom:0">Quantity: {{ line.quantity }}<br/>
Total: {{ line.price|money }}</p></div></div>
</td>
</tr>


{% endfor %}


<tr>
<td class="kl-table-subblock" style="width:25%;overflow:hidden;border-top:solid 1px #eeeeee;vertical-align:top;padding-top:8px;padding-right:10px;padding-bottom:8px;padding-left:0px;">
<div style="font-family:Helvetica, Arial, sans-serif;font-size:16px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.3;text-align:right;color:#1a1a1a;"><div style="text-align:right;"></div></div>
</td>
<td class="kl-table-subblock" style="width:75%;overflow:hidden;border-top:solid 1px #eeeeee;vertical-align:top;padding-top:8px;padding-right:10px;padding-bottom:8px;padding-left:0px;">
<div style="font-family:Helvetica, Arial, sans-serif;font-size:16px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.3;text-align:left;color:#1a1a1a;"><div style="text-align:left;"><p style="padding-bottom:0; text-align:right">{% if discounts %} <strong>Discount (code: {{ discounts.first.code }}):</strong> {{ discounts_savings|money }}<br/>
{% endif %} <strong>Subtotal:</strong> {{ subtotal_price|money }}<br/>
{% for tax_line in tax_lines %}<strong>{{ tax_line.title }}:</strong> {{ tax_line.price|money }}<br/>
{% endfor %} {% if requires_shipping %} <strong>Shipping:</strong> {{ shipping_price|money }}<br/>
{% endif %} <strong>Total:</strong> {{ total_price|money }}</p>
</div></div>
</td>
</tr>
</tbody>
{% else %}
<tbody>
</tbody>
{% endif %}
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;" width="100%">
<tbody>
<tr>
<td class="" style="vertical-align:top;padding-top:8px;padding-right:8px;padding-bottom:8px;padding-left:8px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td>
<div style="width:100%;text-align:center">
<!--[if true]><table style="all:unset;opacity:0;" border="0" cellpadding="0" cellspacing="0" ><tr><![endif]-->
<!--[if !true]><!--><div class="" style="display:inline-block;"><!--<![endif]-->
<!--[if true]><td style=""><![endif]-->
<div style="text-align: center;">
<img alt="Instagram" src="https://d3k81ch9hvuctc.cloudfront.net/assets/email/buttons/black/instagram_96.png" style="width:32px;" width="32"/>
</div>
<!--[if true]></td><![endif]-->
<!--[if !true]><!--></div><!--<![endif]-->
<!--[if true]></tr></table><![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--[if true]></td><![endif]-->
</div>
<!--[if true]></tr></table><![endif]-->
</div>
<!--[if mso | IE]></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;width:100%;" width="100%">
<tbody>
<tr>
<td align="center" class="klBranding" style="font-size:0px;padding:25px 0;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:122px;">
<a href="https://www.klaviyo.com/?utm_medium=freebie&amp;utm_source=brand&amp;utm_term=SzXfrk" style="color:#1a1a1a; font-style:normal; font-weight:normal; text-decoration:underline" target="_blank">
<img alt="Powered by Klaviyo" height="50" src="https://d3k81ch9hvuctc.cloudfront.net/assets/email/branding/klaviyo-branding-option-0.png" style="border:0;display:block;outline:none;text-decoration:none;height:50px;width:100%;font-size:13px;" width="122"/>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</div>
</body>
</html>

eCom2Win
Tourist
5 1 1

The issue might not be with the URLs. Have you checked if Klaviyo's settings are overriding the image display or if there's a cache problem?

sndshp
New Member
4 0 0

Hey 👋

No i haven't, how can i make it ? 

eCom2Win
Tourist
5 1 1

To check if Klaviyo's settings are overriding the image display or if there's a cache problem, first, log into Klaviyo and edit the specific campaign or flow where the issue is. Ensure the image URLs are correct and the images aren't hidden or affected by HTML/CSS overrides.

Next, open the image URLs in your browser to verify they're accessible and in a supported format like JPG or PNG. Clear your browser cache or use incognito mode, and try a different browser to rule out cache issues. Send test emails to apps like EmailOnAcid and use Klaviyo’s email preview tool to see if the issue persists.

 

Hope this helps 🙂