Adding HTML to Drag & Drop Template Builder Emails

HTML code blocks allow you to build more advanced features and use custom formatting inside the template builder.  HTML blocks are also used for CTA buttons and product recommendations, as the merge tags for item URLs won't work with the default button and image link options. 

This article explains how to add custom HTML to your emails.

1. Click the Rows tab.
2. Select your preferred Row block and drag it into your template.  In most cases the single, full width block, is best, but the split blocks are great for adding product recs with easy formatting.  
   
   
   
   
3. The empty block is now in your template. Click the Content tab.
   
   
   
   
4. Drag the HTML block into your Row block.
   
   
   
   
5. Click anywhere in the new HTML block. The Content tab is automatically selected.
6. Under Content Properties section, edit the code.
   
   
   
   
   

Examples of popular code are available below:

Product rec with image and product name:

<div style="padding-top: 10px; padding-bottom:10px;">
<table align="center">
<tr>
<td>
<a href="{{rs_rpu1}}">
<img src="{{rs_riu1}}" align="left" width="100%" /></a>
</td>
</tr>
<tr>
<td>
<strong><a style="font-size:.8em; text-decoration:
none; color:#555555; font-family: 'Open Sans', sans-serif;"
href="{{rs_rpu1}}">{{rs_rn1}}</a></strong>
</td>
</tr>
</table>
</div>   

Shopify in-cart product and return to cart button:

<a href="{{rs_rpu1}}"><img src="{{rs_riu1}}"
border alt align="center" width="75%" /></a>
            
<tr>
<a href="{{rs_rpu1}}" style="color: #FFF; font-family:
Myriad Pro, Gill Sans, Gill Sans MT, Calibri, sans-serif;
font-size: 14px; font-weight: bold; text-decoration:
none;">{{rs_rn1}}</a>
</tr>

{% if rs_str_1_usr_attr == null or rs_str_1_usr_attr
== '' %} 
<a href="{{rs_rpu1}}" target="_blank">
<img src="BUTTON IMAGE" align="center" /></a> 

{% else %} 
<a href="{{rs_str_1_usr_attr}}"
target="_blank"><img src="BUTTON IMAGE" align="center"/></a> 
{% endif %}