twigfiddle.com - Fiddle 41rbl6 v1 - Created on July 12, 2019 06:49

File

{% for product in event.products %}   
          <!-- B2 Product Image FLush Left -->
          <table cellpadding="0" cellspacing="0" border="0" width="640" class="full-width-container">
            <tr>
              <td width="640" align="center" style="min-width: 640px;" class="full-width-container-inner">
                <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#ffffff">
                  <tr>
                    <td align="center" style="padding: 30px 0px 20px" class="mobileSidePadding">
                      <table cellpadding="0" cellspacing="0" border="0" width="572" class="full-width-container">
                        <tr>
                          <td width="640" align="center" style="min-width: 572px; border-bottom: 1px solid #999999; padding: 0px 0px 25px 0px;" class="full-width-container-inner">
                            <!--[if gte mso 9]>
                            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                              <tr>
                                <td align="left" valign="top" >
                                  <![endif]-->
                                  <!-- image -->
                                  <table width="292" align="left" class="stackTbl" cellpadding="0" cellspacing="0" border="0" style="display: inline; width: 292px;">
                                    <tr>
                                      <td align="center" valign="top" width="290">
                                        <a href="{{product.url}}" target="_blank" title="{{product.title}}">
                                        <img border="0" src="{{product.image}}" width="199" height="162" style="display: block;" class="vce-image">
                                        </a>
                                      </td>
                                    </tr>
                                  </table>
                                  <!-- end image -->
                                  <!--[if gte mso 9]>
                                </td>
                                <td align="left" valign="top">
                                  <![endif]-->
                                  <!-- copy -->
                                  <table width="280" align="right" class="stackTbl" cellpadding="0" cellspacing="0" border="0" style="display: inline; width: 280px;">
                                    <tr>
                                      <td align="left" valign="top" style="padding: 15px 24px 0px 0px;" class="mobileSidePadding bottomPadding30">
                                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                          <!-- Headline -->
                                          <tr>
                                            <td class="centerText" align="left" valign="top" style="color: #222222; font-size: 18px; line-height: 24px; padding: 0px 0px 15px 0px; font-family:Trueno, Helvetica, Arial, sans-serif, 'Montserrat-Bold'; font-weight:bold;">
                                              <a href="{{product.url}}" target="_blank" style="color: #222222; text-decoration: none;" title="{{product.title}}">{{product.title}}</a>
                                            </td>
                                          </tr>
                                          <!-- end Headline -->
                                         
                                          <!-- Body Copy -->
                                          <tr>
                                            <td class="centerText" align="left" valign="top" style="color: #222222; font-size: 16px; line-height: 22px; padding: 0px 0px 15px 0px; font-family:Trueno, Helvetica, Arial, sans-serif, 'Montserrat-Bold'; font-weight: bold;">Don't Pay ${{product.price}}</td>
                                          </tr>
                                          <!-- end Body Copy -->
                                          <tr>
                                            <td class="center" align="left">
                                              <table align="centerTbl" cellpadding="0" cellspacing="0" border="0" class="center">
                                                <!-- Price -->
                                                <tr>
                                                  <td align="center" valign="top" style="font-family:Trueno, Helvetica, Arial, sans-serif, 'Montserrat-Bold'; background-color:#ff0000; font-size:20px; line-height:24px; font-weight:bold; padding:8px 15px 5px 15px;"><a href="https://www.catch.com.au/event/xxxxxx" target="_blank" style="color:#ffffff; text-decoration:none;"><span style="color:#ffffff; font-size:20px; vertical-align:-1px;"><sup style="font-size: 12px; line-height: 0; vertical-align: 10px;">$</sup>{{product.discountPercent}}</span></a></td>
																									 <td align="center" valign="top" style="font-family:Trueno, Helvetica, Arial, sans-serif, 'Montserrat-Bold'; background-color:#000000; font-size:20px; line-height:24px; font-weight:bold; padding:8px 20px 5px 20px;"><a href="https://www.catch.com.au/event/xxxxxx" target="_blank" style="color:#ffffff; text-decoration:none;"><span style="color:#ffffff; font-size:20px; vertical-align:-1px;">Save<sup style="font-size: 12px; line-height: 0; vertical-align: 10px;">$</sup>{{product.savings}}</span></a></td>
                                                </tr>
                                                <!-- End RRP and Savings -->
                                              </table>
                                            </td>
                                          </tr>
                                        </table>
                                      </td>
                                    </tr>
                                  </table>
                                  <!-- end copy -->
                                  <!--[if gte mso 9]>
                                </td>
                              </tr>
                            </table>
                            <![endif]-->
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <!-- END B2 Product Image FLush Left -->
					{% endfor %}

Format

{
"event" : { 
"products": [
{
    "url": "https://cotdweb.devcat.ch/product/mambo-boys-tape-deck-sunglasses-blue-black-331622/",
    "title": "Privu00e9 Revaux The Escobar Sunglasses - Pink",
    "savings": "9.99",
    "image": "https://static.devcat.ch/images/product/0003/3166/5a16878d9ace3984407919_w660h540.jpg",
    "price": "39.96",
    "discountPercent": "20.00"
},
{
    "url": "https://cotdweb.devcat.ch/product/mambo-boys-tape-deck-sunglasses-blue-black-331622/",
    "title": "Privu00e9 Revaux The Escobar Sunglasses - Pink",
    "savings": "9.99",
    "image": "https://static.devcat.ch/images/product/0003/3166/5a16878d9ace3984407919_w660h540.jpg",
    "price": "39.96",
    "discountPercent": "20.00"
  }
]
}
}