So, as part of a new job, I have been teaching myself to build HTML emails.
It has been a real learning curve making things compatible between mainly every other email renderer and outlook, but I am finally at a point where it works apart from on outlook mobile.
I am struggling to find relevant info online so any help appreciated.
I also added images to the bottom of this post but they got included in the code block and i cant remove them / bring them to the top or stack overflow says i haven't formatted this post correctly??? please see them at the bottom of this code
Please see code:
{% set products = [] %}
{% set item = catalogs.products.item_by_id('M12CASECPDH') %}
{% append item to products %}
{% set item = catalogs.products.item_by_id('TJ3X') %}
{% append item to products %}
{% set length = [products[0].title |length,products[1].title|length] | sort(reverse=True) %}
{% set titleHeight = ((length[0] / 14) | int + 1) * 16 %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
<o:AllowPNG/>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</style>
</head>
<body style="background-color:#ededed; margin:0; padding:0; -webkit-text-size-adjust:none; text-size-adjust:none">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0; mso-table-rspace:0; background-color:#ededed;">
<tbody>
<tr>
<td>
<table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0; mso-table-rspace:0;">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0; mso-table-rspace:0; color:#000;" width="600">
<tbody>
<tr>
<td style="padding-right:9px;">
<div style="max-height:0; mso-element-wrap:none;">
<img src="img url">
</div>
</td>
<td style="padding-left:9px;">
<div style="max-height:0; mso-element-wrap:none;">
<img src="img url">
</div>
</td>
</tr>
<tr>
<td style="padding-bottom:0px; padding-left:20px; padding-right:10px; padding-top:2px;">
<div style="font-family:sans-serif;">
<div style="font-size:14px; mso-line-height-alt:16.8px; color:#222222; line-height:1.2; font-family:Arial,Helvetica Neue,Helvetica,sans-serif;">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" filled="false" style="position: relative; top:-425px; left:-20px; width:150px; height:auto;">
<![endif]-->
<p style="margin:0; font-size:18px; text-align:left; color:#ffffff">
<b><i>SAVE {{products[0].discount_percentage | round | int}}%</i></b>
</p>
<!--[if mso]>
</v:rect>
<![endif]-->
</div>
</div>
</td>
<td style="padding-bottom:0px; padding-left:20px; padding-right:10px; padding-top:2px;">
<div style="font-family:sans-serif;">
<div style="font-size:14px; mso-line-height-alt:16.8px; color:#222222; line-height:1.2; font-family:Arial,Helvetica Neue,Helvetica,sans-serif;">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" filled="false" style="position: relative; top:-425px; left:-20px; width:150px; height:auto;">
<![endif]-->
<p style="margin:0; font-size:18px; text-align:left; color:#ffffff">
<b><i>SAVE {{products[1].discount_percentage | round | int}}%</i></b>
</p>
<!--[if mso]>
</v:rect>
<![endif]-->
</div>
</div>
</td>
</tr>
<!-- Product 1 -->
<tr>
<td width="50%" style="mso-table-lspace:0; mso-table-rspace:0; font-weight:400; text-align:left; vertical-align:top; border-top:0; border-right:0; border-bottom:0; border-left:0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0; mso-table-rspace:0;">
<tr>
<td style="width:100%; padding-right:0; padding-left:0; padding-top:20px;">
<div align="center" style="line-height:10px;">
<a href="{{products[0].link}}" target="_blank" style="outline:0" tabindex="-1">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" filled="false" style="position:relative; top:-400px; left:60px">
<![endif]-->
<img src="{{products[0].image}}" style="height:auto; border:0; width:200px; max-width:100%; max-height:200px;" width="200" alt="{{products[0].title}}" title="{{products[0].title}}">
<!--[if mso]>
</v:rect>
<![endif]-->
</a>
</div>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0; mso-table-rspace:0; word-break:break-word;">
<tr>
<td style="padding-bottom:0px; padding-left:10px; padding-right:10px; padding-top:0px;">
<div style="font-family:sans-serif;">
<div style="font-size:12px; mso-line-height-alt:12px; color:#222222; font-family:Arial,Helvetica Neue,Helvetica,sans-serif;">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" filled="false" style="position: relative; top:-205px; left:65px; width:200px; height:auto;">
<![endif]-->
<p style="margin:0; font-size:18px; text-align:center; color:#000000">
<s><i>was £{{products[0].original_price}}</i></s>
</p>
<!--[if mso]>
</v:rect>
<![endif]-->
</div>
</div>
</td>
</tr>
<tr>
<td style="padding-bottom:0px; padding-left:15px; padding-right:10px; padding-top:2px;">
<div style="font-family:sans-serif;">
<div style="font-size:14px; mso-line-height-alt:16.8px; color:#222222; line-height:1.2; font-family:Arial,Helvetica Neue,Helvetica,sans-serif;">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" filled="false" style="position: relative; top:-185px; left:65px; width:200px; height:auto;">
<![endif]-->
<p style="margin:0; font-size:50px; text-align:center; color:#ff0000">
<b><i>£{{ "%0.2f" | format(products[0].sale_price | float) }}</i></b>
</p>
<!--[if mso]>
</v:rect>
<![endif]-->
</div>
</div>
</td>
</tr>
</table>
<table style="font-family: Ubuntu, Helvetica, Arial, sans-serif; text-align: cenetr; width: 176px;" role="presentation" cellpadding="0" cellspacing="0" width="176" border="0" align="center">
<tbody>
<tr>
<td style=" padding: 0px 10px 0px 10px; font-family: Ubuntu, Helvetica, Arial, sans-serif, sans-serif;text-align: cenetr;" align="center">
<!--[if mso]>
<style>.v-button {background: transparent !important;}</style>
<![endif]-->
<div align="center">
<!--[if mso]>
<v:rect
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:w="urn:schemas-microsoft-com:office:word" href="{{products[0].link}}" style="height:37px; v-text-anchor:middle; width:176px; position:relative; top:-120px; left:-10px;" arcsize="0%" stroke="f" fillcolor="none">
<w:anchorlock/>
<center style="color:#FFFFFF;">
<![endif]-->
<a href="{{products[0].link}}" target="_blank" style="box-sizing: border-box; display: inline-block; text-decoration: none; -webkit-text-size-adjust: none; text-align: center; color: #FFFFFF; background-color: rgba(255, 0, 0, 0.0); border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; width: 100%; max-width: 100%; font-size: 20px;text-align: center;">
<span style="display: block; padding: 15px 30px; line-height: 120%;">
<span style="line-height: 20px;"></span>
</span>
</a>
<!--[if mso]>
</v:center>
</v:rect>
<![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td style="padding-left:10px; padding-right:10px; padding-top:10px; height:{{titleHeight}}px; vertical-align:top;">
<div style="font-family:sans-serif;">
<div style="font-size:18px; mso-line-height-alt:18px; color:#ffffff; line-height:1.2; font-family:Arial,Helvetica Neue,Helvetica,sans-serif; ">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" filled="false" style="position: relative; top:-95px; left:10px; width:300px; height:auto;">
<![endif]-->
<p style="margin:0; font-size:18px; text-align:center;">
<a style="text-decoration:none; color:#ffffff; line-height:18px;" href="{{products[0].link}}" target="_blank" rel="noopener">
<b>{{products[0].title}}</b>
</a>
</p>
<!--[if mso]>
</v:rect>
<![endif]-->
</div>
</div>
</td>
</tr>
</table>
</td>
<!-- Product 2 -->
<td width="50%" style="mso-table-lspace:0; mso-table-rspace:0; font-weight:400; text-align:left; vertical-align:top; border-top:0; border-right:0; border-bottom:0; border-left:0;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0; mso-table-rspace:0;">
<tr>
<td style="width:100%; padding-right:0; padding-left:0; padding-top:20px;">
<div align="center" style="line-height:10px;">
<a href="{{products[1].link}}" target="_blank" style="outline:0" tabindex="-1">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" filled="false" style="position:relative; top:-400px; left:60px">
<![endif]-->
<img src="{{products[1].image}}" style="height:auto; border:0; width:200px; max-height:200px; max-width:100%" width="200" alt="{{products[1].title}}" title="{{products[1].title}}">
<!--[if mso]>
</v:rect>
<![endif]-->
</a>
</div>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0; mso-table-rspace:0; word-break:break-word;">
<tr>
<td style="padding-bottom:0px; padding-left:10px; padding-right:10px; padding-top:0px;">
<div style="font-family:sans-serif;">
<div style="font-size:12px; mso-line-height-alt:12px; color:#222222; font-family:Arial,Helvetica Neue,Helvetica,sans-serif;">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" filled="false" style="position: relative; top:-205px; left:65px; width:200px; height:auto;">
<![endif]-->
<p style="margin:0; font-size:18px; text-align:center; color:#000000">
<s><i>was £{{products[1].original_price}}</i></s>
</p>
<!--[if mso]>
</v:rect>
<![endif]-->
</div>
</div>
</td>
</tr>
<tr>
<td style="padding-bottom:0px; padding-left:15px; padding-right:10px; padding-top:2px;">
<div style="font-family:sans-serif;">
<div style="font-size:14px; mso-line-height-alt:16.8px; color:#222222; line-height:1.2; font-family:Arial,Helvetica Neue,Helvetica,sans-serif;">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" filled="false" style="position: relative; top:-185px; left:65px; width:200px; height:auto;">
<![endif]-->
<p style="margin:0; font-size:50px; text-align:center; color:#ff0000;">
<b><i>£{{ "%0.2f" | format(products[1].sale_price | float) }}</i></b>
</p>
<!--[if mso]>
</v:rect>
<![endif]-->
</div>
</div>
</td>
</tr>
</table>
<table style="font-family: Ubuntu, Helvetica, Arial, sans-serif; text-align: cenetr; width: 176px;" role="presentation" cellpadding="0" cellspacing="0" width="176" border="0" align="center">
<tbody>
<tr>
<td style="padding: 0px 10px 0px 10px; font-family: Ubuntu, Helvetica, Arial, sans-serif, sans-serif;text-align: cenetr;" align="center">
<!--[if mso]>
<style>.v-button {background: transparent !important;}</style>
<![endif]-->
<div align="center">
<!--[if mso]>
<v:rect
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:w="urn:schemas-microsoft-com:office:word" href="{{products[1].link}}" style="height:37px; v-text-anchor:middle; width:176px; position:relative; top:-120px; left:-10px;" arcsize="0%" stroke="f" fillcolor="none">
<w:anchorlock/>
<center style="color:#FFFFFF;">
<![endif]-->
<a href="{{products[1].link}}" target="_blank" style="box-sizing: border-box; display: inline-block; text-decoration: none; -webkit-text-size-adjust: none; text-align: center; color: #FFFFFF; background-color: rgba(255, 0, 0, 0.0); border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; width: 100%; max-width: 100%; font-size: 14px;text-align: cenetr;">
<span style="display: block; padding: 15px 30px; line-height: 120%;">
<span style="line-height: 16.8px;"></span>
</span>
</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td style="padding-left:10px; padding-right:10px; padding-top:10px;height:{{titleHeight}}px; vertical-align:top;">
<div style="font-family:sans-serif;">
<div style="font-size:18px; mso-line-height-alt:18px; color:#ffffff; line-height:1.2; font-family:Arial,Helvetica Neue,Helvetica,sans-serif;">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" filled="false" style="position: relative; top:-95px; left:10px; width:300px; height:auto;">
<![endif]-->
<p style="margin:0; font-size:18px; text-align:center;">
<a style="text-decoration:none; color:#ffffff; line-height:18px;" href="{{products[1].link}}" target="_blank" rel="noopener">
<b>{{products[1].title}}</b>
</a>
</p>
<!--[if mso]>
</v:rect>
<![endif]-->
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End -->
</body>
</html>
And please see images showing correct vs incorrect rendering:
outlook app - incorrect
outlook web on mobile - incorrect
gmail app - correct
outlook desktop app - correct
gmail in chrome on desktop - correct
My theory is that outlook mobile isn't respecting the VML I've written for regular outlook, but then surely it should just ignore it completely and render correctly the same as gmail???
PS, sorry my code is not pretty.
<style>blocks so we can't answer you as yet. See also stackoverflow.com/questions/74312654/…{% set products = [] %}is still not valid code for an email. If you send it out like that, it's obvious that the client displays nonsense. Same for the other sections like£{{ "%0.2f" | format(products[0].sale_price | float) }}. If you are using any kind of templating language, please check whether it is used properly by checking the markup that the client receives