Emailing Template Format

This article explains how to build an email template to be used in our email editor. You can still use any html for sending an email.

We provide example template you can download and modify.

Also consider having a modified template in your Template Gallery.

If you decide to use your own html, you can paste it in the code section. If the copied html does not follow our guidelines, editor is disabled.

Preview and Unsubscribe tags:

<vtpreview>any text here</vtpreview>
<vtunsubscribe> any text here </vtunsubscribe>

Those tags will be replaced with links to your unsubscribe and preview page.

  • body tag needs to contain one <table> with class=”emailHtml-container”
  • this table should have only one <tr> and one <td>
  • style from this table and it’s <td> will be copied inside the editor

Example of html header

<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" yahoo="fix">
   <center>
       <table class="emailHtml-container" align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="font-family: 'Aleo', Raleway, Helvetica, Open Sans, georgia, serif; border-spacing:0px ;border-collapse:collapse">
           <tr>
               <td align="center" valign="top" style="background-color:#fff;padding:0px 0px 40px 0px">

<table class="builder-table-sortable">
<tbody><tr><td>

Content

Inside builder-table-sortable there will be <tr> elements with class=“email-element”.

Footer

The following are the closing tags for the above header.

</td></tr><tbody></table>
<!-- end of table sortable -->
               </td>
            </tr>
        </table>
     </center>
  </body>
</html>

Content description

Element blocks

  • there are <tr> elements inside with class=”email-element”
  • each of these <tr> needs to have data-block=”” and data-title=”” attributes. Data-block value should be unique across template. Data-title is used to describe content of block. Those are visible in the drag&drop section inside the editor.
  • each <tr> should only have one <td> with the class=”cell-wrap-td
  • this <td class=”cell-wrap-td”> tag can have background-color. This color can be changed using our editor. If any content of this <td> has background-color, it needs to be changed manually
  • <td> should contain a <table with class=”cell-wrap-table” with normal html table structure. Other elements inside this <td> might break design in visual editor.
Example of two blocks in a code editor

Example block element containing logo in the center

<tr class="email-element" data-block="logo2" data-title="Logo center" style="left: 0px; right: 0px;">
    <td style="background-color:#fff;padding:0px" class="cell-wrap-td">
        <table class="cell-wrap-table" style="width:100%;border-spacing:0px; border:0px;border-collapse:collapse" cellpadding="0" cellspacing="0" width="100%">
            <tbody>
                <tr>
                    <td style="text-align:center;width:100%;line-height:1px" valign="top">
                        <a href="http://example.com" style="line-height:1px"><img src="http://www.example.com/logo.png" style="max-width:100%; padding:0px 0px;margin:0px;" alt="" title="" img-editable=""></a>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>

Example block element containing two products with recommendations

<tr class="email-element" data-block="products2reccs" data-title="Two recommended products" style="left: 0px; right: 0px;">
    <td class="cell-wrap-td">
        <table class="cell-wrap-table" cellpadding="0" cellspacing="0" width="100%">
            <tbody>
                <tr>
                    <td reccs-editable="" align="center">
                        <!-- this table.reccs-item gets multipled -->
                        <table reccs-item="" class="box-item">
                            <tbody>
                                <tr>
                                    <td style="padding-right:2%">
                                        <div class="box-image">
                                            <a href="#" class="item-url"><img class="item-image" src="http://cdn.domain.com/assets/images/productimage.png" title=""></a>
                                        </div>
                                        <div style="text-align:center; padding:0px 0px 20px 0px" class="box-info">
                                            <a href="#" class="item-url">
                                                <div class="item-title">Product title</div>
                                                <div class="isDiscount"><span><span class="item-price">020.00</span> USD</span>&nbsp; <span style="color:#ff3300"><span class="item-discountPrice" style="">00.00</span>USD</span>
                                                </div>
                                                <div class="notDiscount" style=""><span style="color:#444;" class="item-price">00.00</span>USD</div>
                                            </a>
                                            <div style="padding-top:10px"><a href="#" class="button item-url" style="">Add to cart</a> </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <!-- table.reccs-item gets duplicated here -->
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>

Specific tags rules

Rules for block rows containing reccommendations

  • in .html the <tr class=”email-element”> containing reccs should also have data-logic=“{}” attribute. Empty logic is considered “{}” or “”
  • there must be at least 1 tag (usually <td> or <tr> inside a table) with reccs-editable=”” attribute (the html block containing each product information). This elements will get multiplied by the number of products specified in the block configuration
  • Don’t put reccs-editable=”” on the child tag right after <tr class=”email-element” <td> <table reccs-editable.. (the visual editor won’t work). A solution is to wrap it under another <div> tag.
  • all tags with reccs-item=”” attribute should be on same level (not inside other tags)
  • first element with reccs-item will be put inside <tag vtproduct data-id></tag>, with reccs-item attribute removed and all children tags that have item-attrName will have their content replaced with item attribute
  • tags with classes “isDiscount” and “notDiscount” to display correct prices should be siblings (same level within parent) and close to each other
  • tag content that has class discountPercent will be replaced with rounded percent followed. Add % if you need it outside this tag

Multiple products on the same line:

  • inside reccs-editable tag should be at least one tag with reccs-item attribute that will be substituted inside returning html (reccs-editable tag content will be replaced with reccs-item (vtproduct with data-id=”posX”)
  • consider adding reccs-item on an item that can be multipled at the same level.
<td reccs-editable>
<table> 
<tr>
<td reccs-item> <!-- works find but if you want 10 products all will be on the same line -->
...
<table reccs-item> <!-- better approach to make the template responsive. -->

Note: in our gallery editor the algorithms popup is not available.

Rules for rows containing manually editable items

Note: We recommend having only recommendations blocks with reccs-editable. The editor does the conversion automatically to allow you to manually select items in the editor.

Classes that need to be added inside the [item-editable] container:

<tr>
 <td> 
<table item-editable="">
...
</table>
 </td>
</tr>

Item attributes classes:

Elements having the following classes are being replaced with specific item values

  • item-url – href attribute of <a> tag is replaced with product url
  • item-image – src attribute of <img> is replaced with product image
  • item-title – replaced with product title
  • item-desc – replaced with product description
  • item-price – item price
  • item-discountPrice – item discount Price
  • item-attrName any tag with class name with this format “item-attrName” will get it’s content replaced with **|product.attrName|** See below.

Price and discountPrice tags will not include currency. Currency should be displayed in a tag before or after it.

  • tags with currency_before class name get their content being replaced with value set on your account
  • tags with currency_after class name get their content being replaced with value set on your account

Some other custom classes that can be added to html tags.

  • notDiscount – gets removed when product is not on sale (does not have discountPrice)
  • isDiscount – gets removed when product is on sale (has discount price)
  • discountPercent – gets replaced with the discount percent, when item has discount Price (it is being calculated and rounded without decimals)

All other elements having the class name like item-attributeName will have their content being replaced with the value of the item attribute.

<span class="item-attributeName"></span>
will become
<span class="item-attributeName">**|product.attributeName|**</span>

Here is a full list of values replacements being made when email content is saved.

Rules for Text tags

  • To make texts editable please add data-editable attribute to any <div> <p> <span> tags
  • you can also have data-editable added to tags containing item-attrName classes. In this case we will ignore and not replace the content when you update the value

Rules for IMG tags

  • Please add img-editable attribute on <img> tags
  • take parent width (usually TD) by having max-width 100%
  • height is not set, neither max-height when client has the option to upload images

Rules for A tags

  • if button add class=”button” (only on the <a> tags)
  • if <a> contains an img then should only have img-editable on the <img> tag and not link-editable on the <a>

Solution for product images with different heights

  • On the <img tag with   class=“item-image”  add height=”170”

            ex: <img class=“item-image” src=“http://cdn.domain.com/assets/images/productimage.png” title=“” style=“max-width:100%” alt=“” width=“180” height=”170”>

OUTLOOK

Images must have the width attribute ex:  width=“180”

Filters for tags and dynamic values:

We use Jinja as our template engine: Entire documentation can be found here: http://jinja.pocoo.org/docs/dev/templates/

Please see Dynamic Tags and modifiers article

Related Articles