<!--[if (gte mso 9)|(IE)]><table width="600" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td><![endif]-->
<table style="margin: 0 auto; max-width: 600px;" border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td>
<!-- START RECOS -->
{% if recommendations.purchased_together %}
<table style="min-width: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#f1f5f8">
<tbody>
<tr>
<td width="15"> </td>
<td>
<table style="min-width: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="50"> </td>
</tr>
<tr>
<td style="color: #010101; font-family: Arial, sans-serif; font-size: 18px; font-weight: bold; line-height: 22px;" align="center">YOUR PRODUCTS ARE FREQUENTLY PURCHASED WITH</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]><table width="492" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td><![endif]-->
<table style="margin: 0 auto; max-width: 492px;" border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="text-align: center; font-size: 0;" valign="bottom">{% if recommendations.purchased_together.0 %}
<div style="width: 100%; max-width: 164px; display: inline-block; vertical-align: bottom;">
<table style="min-width: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="30"> </td>
</tr>
<tr>
<td align="center"><a href="{{recommendations.purchased_together.0.product_url}}" target="_blank"><img style="display: block; border: none;" src="{{recommendations.purchased_together.0.image_url}}" alt="{{recommendations.purchased_together.0.name}}" width="104" /></a></td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td style="font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 18px;" align="center"><a style="color: #008bc1; text-decoration: none;" href="{{recommendations.purchased_together.0.product_url}}" target="_blank">{{recommendations.purchased_together.0.name}}</a></td>
</tr>
</tbody>
</table>
</div>
{% endif %}
<!--[if (gte mso 9)|(IE)]></td><td width="164" valign="bottom"><![endif]-->{% if recommendations.purchased_together.1 %}
<div style="width: 100%; max-width: 164px; display: inline-block; vertical-align: bottom;">
<table style="min-width: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="30"> </td>
</tr>
<tr>
<td align="center"><a href="{{recommendations.purchased_together.1.product_url}}" target="_blank"><img style="display: block; border: none;" src="{{recommendations.purchased_together.1.image_url}}" alt="{{recommendations.purchased_together.1.name}}" width="104" /></a></td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td style="font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 18px;" align="center"><a style="color: #008bc1; text-decoration: none;" href="{{recommendations.purchased_together.1.product_url}}" target="_blank">{{recommendations.purchased_together.1.name}}</a></td>
</tr>
</tbody>
</table>
</div>
{% endif %}
<!--[if (gte mso 9)|(IE)]></td><td width="164" valign="bottom"><![endif]-->{% if recommendations.purchased_together.2 %}
<div style="width: 100%; max-width: 164px; display: inline-block; vertical-align: bottom;">
<table style="min-width: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="30"> </td>
</tr>
<tr>
<td align="center"><a href="{{recommendations.purchased_together.2.product_url}}" target="_blank"><img style="display: block; border: none;" src="{{recommendations.purchased_together.2.image_url}}" alt="{{recommendations.purchased_together.2.name}}" width="104" /></a></td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td style="font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 18px;" align="center"><a style="color: #008bc1; text-decoration: none;" href="{{recommendations.purchased_together.2.product_url}}" target="_blank">{{recommendations.purchased_together.2.name}}</a></td>
</tr>
</tbody>
</table>
</div>
{% endif %}</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
<table style="min-width: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="50"> </td>
</tr>
</tbody>
</table>
</td>
<td width="15"> </td>
</tr>
</tbody>
</table>
<!-- SWITCH WITH TOP_SELLERS -->
{% else %}
<!-- START TOP SELLERS -->
<table style="min-width: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#f1f5f8">
<tbody>
<tr>
<td width="15"> </td>
<td>
<table style="min-width: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="50"> </td>
</tr>
<tr>
<td style="color: #010101; font-family: Arial, sans-serif; font-size: 18px; font-weight: bold; line-height: 22px;" align="center">CHECK OUT THESE POPULAR PRODUCTS</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]><table width="492" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td><![endif]-->
<table style="margin: 0 auto; max-width: 492px;" border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="text-align: center; font-size: 0;" valign="bottom">{% if recommendations.top_sellers.0 %}
<div style="width: 100%; max-width: 164px; display: inline-block; vertical-align: bottom;">
<table style="min-width: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="30"> </td>
</tr>
<tr>
<td align="center"><a href="{{recommendations.top_sellers.0.product_url}}" target="_blank"><img style="display: block; border: none;" src="{{recommendations.top_sellers.0.image_url}}" alt="{{recommendations.top_sellers.0.name}}" width="104" /></a></td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td style="font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 18px;" align="center"><a style="color: #008bc1; text-decoration: none;" href="{{recommendations.top_sellers.0.product_url}}" target="_blank">{{recommendations.top_sellers.0.name}}</a></td>
</tr>
</tbody>
</table>
</div>
{% endif %}
<!--[if (gte mso 9)|(IE)]></td><td width="164" valign="bottom"><![endif]-->{% if recommendations.top_sellers.1 %}
<div style="width: 100%; max-width: 164px; display: inline-block; vertical-align: bottom;">
<table style="min-width: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="30"> </td>
</tr>
<tr>
<td align="center"><a href="{{recommendations.top_sellers.1.product_url}}" target="_blank"><img style="display: block; border: none;" src="{{recommendations.top_sellers.1.image_url}}" alt="{{recommendations.top_sellers.1.name}}" width="104" /></a></td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td style="font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 18px;" align="center"><a style="color: #008bc1; text-decoration: none;" href="{{recommendations.top_sellers.1.product_url}}" target="_blank">{{recommendations.top_sellers.1.name}}</a></td>
</tr>
</tbody>
</table>
</div>
{% endif %}
<!--[if (gte mso 9)|(IE)]></td><td width="164" valign="bottom"><![endif]-->{% if recommendations.top_sellers.2 %}
<div style="width: 100%; max-width: 164px; display: inline-block; vertical-align: bottom;">
<table style="min-width: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="30"> </td>
</tr>
<tr>
<td align="center"><a href="{{recommendations.top_sellers.2.product_url}}" target="_blank"><img style="display: block; border: none;" src="{{recommendations.top_sellers.2.image_url}}" alt="{{recommendations.top_sellers.2.name}}" width="104" /></a></td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td style="font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 18px;" align="center"><a style="color: #008bc1; text-decoration: none;" href="{{recommendations.top_sellers.2.product_url}}" target="_blank">{{recommendations.top_sellers.2.name}}</a></td>
</tr>
</tbody>
</table>
</div>
{% endif %}</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
<table style="min-width: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="50"> </td>
</tr>
</tbody>
</table>
</td>
<td width="15"> </td>
</tr>
</tbody>
</table>
<!-- END TOP SELLERS -->
{% endif %}
<!-- END RECOS -->
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.