<!--[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 -->
        <table style="min-width: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#f1f5f8">
          <tbody>
            <tr>
              <td width="15">&nbsp;</td>
              <td>
                <table style="min-width: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0">
                  <tbody>
                    <tr>
                      <td height="50">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</td>
                    </tr>
                  </tbody>
                </table>
              </td>
              <td width="15">&nbsp;</td>
            </tr>
          </tbody>
        </table>
        <!-- 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.