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" ".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.