Email Templates

Create a new email directly in the email node in the scenario, or in the Asset Manager. You can use both the visual or HTML builder. You will need to enter the code below to display the items left in the cart in the email.

Please watch closely the comments that explain how the code works. You will need to change some parts as explained there. You also need to decide which item attributes you want to display. You can display each attribute that is available as a column in your catalog, simply by calling item.column_name. You can also display any value tracked in the attribute product_list of the event cart_update by calling product.value_name.

<table cellpadding="0" cellspacing="0" width="100%" style="max-width: 1000px; text-align:left; font-size:14px;">

<!-- load the list of products in cart from the aggregate that you created in the scenario in the step 2d part A (last cart_update.product_list). -->
{% set products = aggregates['59cb9e784d539b3094f331ed'] %} 

<!-- loop through each product to display each product customer has left in their cart -->
{% for product in products %} 
    
    <!-- load the product data from catalog into the item variable. It matches the product_id from tracking (product.product_id) with the information from the catalog. -->
    <!-- change "cart_products" with the name of the catalog you want to use to match products from tracking. -->
    {% set item = catalogs.cart_products.item_by_id(product.product_id) %}  
    
    <!-- if product was found in the catalog -->
    {% if item %}
    
        <!-- display the product -->
        <tr>
            <td style="padding-bottom: 20px;">
                <table width="100%">
                    <tr>
                        <td width="30%">
                            <a href="{{ item.url }}">
                                <img src="{{ item.image }}" alt="{{ item.title }}" width="100" style="width:auto; max-width:100%; max-height:150px;" />
                            </a>
                        </td>
                        <td width="70%" style="padding:0 10;">
                            <p><a href="{{ item.url }}" style="font-size:20px; text-decoration: none; color:#1c1733">{{ item.title }}</a></p>
                            <p><b>Quantity:</b> {{ product.quantity }}</p>
                            <p><b>Price:</b> {{ (item.price * product.quantity)}} €</p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    {% endif %}

{% endfor %}

</table>

The code below calculates the total price of the cart. If this information is available in your tracking (which we recommend to set up), you can instead just use a simple jinja {{event.total_price}}.

{% for product in products %}
    {% set item = catalogs.cart_products.item_by_id(product.product_id) %}
    {% set total_price = (total_price + (item.price * product.quantity)) %}
    {% if loop.index == (products | length) %}
        Total price: <b>{{ total_price }} €</b>
    {% endif %}
{% endfor %}

Responsive Email Templates with MJML

MJML is a framework for developing responsive email templates, which renders across a wide range of email providers, web browsers and operating systems. MJML can either be used locally via “Node Package Manager” or in a provided online text editor with a live visual preview.

👍

You can read more about its usage here: Editor, Documentation , Sample templates

Walk-through use case

MJML utilizes a grid system. enables you to put content into a row whereas enables us to display content next to each other in columns within a particular row. Width of the columns is shared evenly by default i.e. with 2 columns next to each other, each will occupy 50% of the space. The width of a row is 600px by default.

To insert custom HTML elements we would use the MJML tag . Within this tag, we can specify our own HTML elements. Say we want to display an image of a product with a URL, product description and product price all next to each other.

<mj-sectuon padding="0px">
  <mj-column width="200">
    <mj-text align="center">
      <div style="text-align: center;">
        <a style="text-align: center;" href="{{item.url}}>
          <img width="130" src="{{item.image}}>
        </a>
      </div>
    </mj-text>
  </mj-column>
  <mj-column width="250">
    <mj-text align="center" font-size="20px" color="#000000">
      <a style="color:black; text-decoration:none; font-family; 'Lato', sans-serif;" href="{{item.url}}">{{item.image}}
      </a>
    </mj-text>
  </mj-column>
  <mj-column width="150">
    <mj-text align="center" font-size=20px" color="#000000">
      <span style="font-family: 'Lato', sans-serif;">£{{item.price}}
      </span> 
    </mj-text>
  </mj-column>
</mj-section>

First, we create a row by using tag. Within this tag, we then create 3 columns using . As our description of a product is much longer than the price of a product we decide to allocate more space to this column specifying attribute width . Notice that we don’t add units (e.g. pixels) and that the total width of all columns adds up to 600 (as we have mentioned previously the width of a row is 600px). To create URL links and to embed these into a picture we need to use classic HTML. This we can do by nesting our HTML code in the tag.

<mj-text align="center">
    <div style="text-align: center;">
    <a style="text-align: center;" href="{{item.url}}">
        <img width="130" src={{item.image}}">
    </a>
  </div>
</mj-text>

Notice, that we were able to use a very straight forward syntax while MJML ensures that the HTML code will display correctly on various browsers and email clients.

In the example above we have contained some CSS styling directly to our HTML using attribute “Style”. We can also write our CSS code in the “head section” as follows:

<mj-head>
    <mj-style inline="inline">
    body{font-family: 'Lato', sans-serif;"}
    a{font-family: 'Lato', sans-serif;"}
    p{font-family: 'Lato', sans-serif;"}
  </mj-style>
</mj-head>

📘

Note that the CSS will apply only to HTML elements and will have no impact on the MJML tags. To style MJML tags we need to use the supported attributes. As can be seen from the examples, we can directly embed Jinja into the code. However, Jinja used outside of the MJML elements (e.g. cycles) will be discarded.

To export the template to the Exponea App we need to convert it to HTML. This can be done in the online editor (see the callout above) by clicking at “view HTML”. We then paste the HTML code into an HTML builder in the Exponea app. At this stage, we can insert further Jinja for customization.

Recommendations

The code example below allows you to insert product recommendations into an email as a dynamic block.
Just add the code into a new predefined HTML block (go to Data and Assets > Asset manager > Blocks > New block).

Once the created dynamic recommendations block is dragged into an email, you can customize the block for look and feel without getting into HTML.

{% set backgroundColor="[[ { name: 'backgroundColor', tooltip: 'If image is used, background color can serve as its overlay, otherwise it is just plain background color.', category: 'Background', orderIndex: '30000', isJsonParam: true } : color | #FFFFFF ]]" %}
{% set productsCount="[[ { name: 'productsCount', tooltip: 'Choose number of items to be displayed in the layout.', category: 'Layout', orderIndex: '31000', isJsonParam: true } : enum(1,2,3,4,5,6,7,8,9,10,11,12) | 3 ]]" %}
{% set numberOfColumns="[[ { name: 'numberOfColumns', tooltip: 'Choose number of columns for the layout.', category: 'Layout', orderIndex: '31001', isJsonParam: true } : enum(1,2,3,4) | 3 ]]" %}
{% set baseFont="[[ { name: 'baseFont', tooltip: 'If you do not use custom font your default website fonts will be used.', category: 'Typography', orderIndex: '32000', isJsonParam: true } : enum(Lato,No custom font) | Lato ]]" %}
{% set titleFontSize="[[ { name: 'titleFontSize', tooltip: 'Font size in px', category: 'Typography', orderIndex: '32001', isJsonParam: true } : string | 14px ]]" %}
{% set titleColor="[[ { name: 'titleColor', tooltip: 'Color in hex(), hsl/a() or rgb/a() format.', category: 'Typography', orderIndex: '32002', isJsonParam: true } : color | #666880 ]]" %}
{% set titleFontWeight="[[ { name: 'titleFontWeight', tooltip: 'Choose one of the predefined values.', category: 'Typography', orderIndex: '32003', isJsonParam: true } : enum(normal,bold) | normal ]]" %}
{% set priceFontSize="[[ { name: 'priceFontSize', tooltip: 'Font size in px', category: 'Typography', orderIndex: '32004', isJsonParam: true } : string | 14px ]]" %}
{% set priceColor="[[ { name: 'priceColor', tooltip: 'Color in hex(), hsl/a() or rgb/a() format.', category: 'Typography', orderIndex: '32005', isJsonParam: true } : color | #000000 ]]" %}
{% set priceFontWeight="[[ { name: 'priceFontWeight', tooltip: 'Choose one of the predefined values.', category: 'Typography', orderIndex: '32006', isJsonParam: true } : enum(normal,bold) | bold ]]" %}
{% set priceCurrency="[[ { name: 'priceCurrency', tooltip: 'Price currency', category: 'Typography', orderIndex: '32007', isJsonParam: true } : string | € ]]" %}
{% set buttonText="[[ { name: 'buttonText', tooltip: 'Any valid text', category: 'CTA', orderIndex: '33000', isJsonParam: true } : string | Show product ]]" %}
{% set buttonFontSize="[[ { name: 'buttonFontSize', tooltip: 'Any valid CSS value can be used', category: 'CTA', orderIndex: '33001', isJsonParam: true } : string | 14px ]]" %}
{% set buttonTextColor="[[ { name: 'buttonTextColor', tooltip: 'Color in hex(), hsl/a() or rgb/a() format.', category: 'CTA', orderIndex: '33002', isJsonParam: true } : color | #FFFFFF ]]" %}
{% set buttonBackgroundColor="[[ { name: 'buttonBackgroundColor', tooltip: 'Color in hex(), hsl/a() or rgb/a() format.', category: 'CTA', orderIndex: '33003', isJsonParam: true } : color | #000000 ]]" %}
{% set buttonFontWeight="[[ { name: 'buttonFontWeight', tooltip: 'Choose one of the predefined values.', category: 'CTA', orderIndex: '33004', isJsonParam: true } : enum(normal,bold) | normal ]]" %}
{% set buttonBorderRadius="[[ { name: 'buttonBorderRadius', tooltip: 'Roundness radius in px', category: 'CTA', orderIndex: '33005', isJsonParam: true } : string | 4px ]]" %}

{% set rcm = recommendations('[[recommendationID]]', productsCount) |batch(numberOfColumns | int) %}

<style>
    @import url('https://fonts.googleapis.com/css2?family=Lato:[email protected];700&display=swap');

    @media only screen {
    html {
        min-height: 100%;
        background: 0 0
    }
}

@media only screen and (max-width: 610px) {
    table.body img {
        width: auto;
        height: auto
    }

    table.body center {
        min-width: 0 !important
    }

    table.body .container {
        width: 100% !important
    }

    table.body .columns {
        height: auto !important;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-left: 10px !important;
        padding-right: 10px !important
    }

    table.body .columns .columns {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    th.small-6 {
        display: inline-block !important;
        width: 50% !important
    }

    th.small-12 {
        display: inline-block !important;
        width: 100% !important
    }

    table.menu {
        width: 100% !important
    }

    table.menu td, table.menu th {
        width: auto !important;
        display: inline-block !important
    }

    table.menu.vertical td, table.menu.vertical th {
        display: block !important
    }

    table.menu[align=center] {
        width: auto !important
    }
}

</style>
<table class="body"
       style="Margin:0;background:0 0;border-collapse:collapse;border-spacing:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;height:100%;line-height:1.3;margin:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;width:100%">
    <tr style="padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top">
        <td class="center" align="center" valign="top"
            style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;word-wrap:break-word">
            <center style="max-width:100%!important;min-width:0!important;width:100%">
                <table align="center" class="container recommendation-template--1 float-center"
                       style="Margin:0 auto;background:#fefefe;background-color:{{ backgroundColor }};border-collapse:collapse;border-spacing:0;float:none;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;margin:0 auto;max-width:600px;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:center;vertical-align:top;width:100%!important">
                    <tbody style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif">
                    <tr style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top">
                        <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;word-wrap:break-word">
                            <table class="spacer"
                                   style="border-collapse:collapse;border-spacing:0;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;width:100%">
                                <tbody style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif">
                                <tr style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top">
                                    <td height="22"
                                        style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;font-size:22px;font-weight:400;hyphens:auto;line-height:22px;margin:0;mso-line-height-rule:exactly;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word">
                                        &nbsp;
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            {% for row in rcm %}
                            <table class="row"
                                   style="border-collapse:collapse;border-spacing:0;display:table;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;padding:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;position:relative;text-align:left;vertical-align:top;width:100%">
                                <tbody style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif">
                                <tr style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top">
                                    {% for item in row %}
                                    <th class="small-12 large-4 columns first last"
                                        style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0 auto;border-collapse:collapse!important;color:#0a0a0a;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0 auto;padding-bottom:10px;padding-left:10px;padding-right:10px;padding-top:0;text-align:left;vertical-align:top;width:190px;word-break:break-word;word-wrap:break-word">
                                        <table
                                            style="border-collapse:collapse;border-spacing:0;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;width:100%">
                                            <tbody style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif">
                                            <tr style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top">
                                                <th style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word">
                                                    <table class="spacer"
                                                           style="border-collapse:collapse;border-spacing:0;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;width:100%">
                                                        <tbody
                                                            style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif">
                                                        <tr style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top">
                                                            <td height="2"
                                                                style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;font-size:2px;font-weight:400;hyphens:auto;line-height:2px;margin:0;mso-line-height-rule:exactly;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word">
                                                                &nbsp;
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                    <table
                                                        style="border-collapse:collapse;border-spacing:0;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;width:100%">
                                                        <tr style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top">
                                                            <td class="product-item-image-wrapper"
                                                                style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:middle;word-break:break-word;word-wrap:break-word">
                                                                <center
                                                                    style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif;max-width:100%!important;min-width:0!important;width:100%">
                                                                    <img src="{{item.image}}"
                                                                         class="product-item-image float-center"
                                                                         width="200" align="center"
                                                                         style="-ms-interpolation-mode:bicubic;Margin:0 auto;border:0;clear:both;display:block;float:none;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;height:auto;margin:0;max-width:100%;outline:0;padding:0;text-align:center;text-decoration:none;width:200px">
                                                                </center>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <table class="spacer"
                                                           style="border-collapse:collapse;border-spacing:0;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;width:100%">
                                                        <tbody
                                                            style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif">
                                                        <tr style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top">
                                                            <td height="4"
                                                                style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;font-size:4px;font-weight:400;hyphens:auto;line-height:4px;margin:0;mso-line-height-rule:exactly;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word">
                                                                &nbsp;
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                    <center
                                                        style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif;max-width:100%!important;min-width:0!important;width:100%">
                                                        <div class="product-item-title float-center" align="center"
                                                             style="color:{{ titleColor }};display:table-cell;font-family:inherit;font-size:{{ titleFontSize }};font-weight:{{ titleFontWeight }};height:40px;text-align:center;vertical-align:bottom">
                                                            {{item.title}}
                                                        </div>
                                                    </center>
                                                    <table class="spacer"
                                                           style="border-collapse:collapse;border-spacing:0;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;width:100%">
                                                        <tbody
                                                            style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif">
                                                        <tr style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top">
                                                            <td height="5"
                                                                style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;font-size:5px;font-weight:400;hyphens:auto;line-height:5px;margin:0;mso-line-height-rule:exactly;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word">
                                                                &nbsp;
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                    <center
                                                        style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif;max-width:100%!important;min-width:0!important;width:100%">
                                                        <div class="product-item-price float-center" align="center"
                                                             style="color:{{ priceColor }};font-family:inherit;font-size:{{ priceFontSize }};font-weight:{{ priceFontWeight }};text-align:center">
                                                            {{item.price}} {{priceCurrency}}
                                                        </div>
                                                    </center>
                                                    <table class="spacer"
                                                           style="border-collapse:collapse;border-spacing:0;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;width:100%">
                                                        <tbody
                                                            style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif">
                                                        <tr style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top">
                                                            <td height="16"
                                                                style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:16px;margin:0;mso-line-height-rule:exactly;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word">
                                                                &nbsp;
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                    <table class="button expanded button-custom-radius"
                                                           style="Margin:0 0 10px 0;border-collapse:collapse;border-spacing:0;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;margin:0 0 10px 0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;width:100%">
                                                        <tbody
                                                            style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif">
                                                        <tr style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top">
                                                            <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word">
                                                                <table
                                                                    style="border-collapse:collapse;border-spacing:0;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;width:100%">
                                                                    <tbody
                                                                        style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif">
                                                                    <tr style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top">
                                                                        <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;background:#2199e8;background-color:{{ buttonBackgroundColor }};border:none;border-collapse:collapse!important;border-radius:{{ buttonBorderRadius }};color:#fefefe;font-family:inherit;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;text-transform:none;vertical-align:top;word-break:break-word;word-wrap:break-word">
                                                                            <center
                                                                                style="font-family:{{ baseFont }},Helvetica,Arial,sans-serif;max-width:100%!important;min-width:0!important;width:100%">
                                                                                <a href="{{item.url}}" align="center"
                                                                                   class="float-center"
                                                                                   style="border:0 solid #2199e8;border-radius:0;color:{{ buttonTextColor }};display:inline-block;font-family:inherit;font-size:{{ buttonFontSize }};font-weight:{{ buttonFontWeight }};line-height:1.3;padding:8px 16px 8px 16px;padding-bottom:7px;padding-left:0;padding-right:0;padding-top:8px;text-align:center;text-decoration:none;width:100%">
                                                                                    {{buttonText}}
                                                                                </a>
                                                                            </center>
                                                                        </td>
                                                                    </tr>
                                                                    </tbody>
                                                                </table>
                                                            </td>
                                                            <td class="expander"
                                                                style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:{{ baseFont }},Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:0!important;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;visibility:hidden;width:0;word-break:break-word;word-wrap:break-word"></td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </th>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </th>
                                    {% endfor %}
                                </tr>
                                </tbody>
                            </table>
                            {% endfor %}
                        </td>
                    </tr>
                    </tbody>
                </table>
            </center>
        </td>
    </tr>
</table><!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none;white-space:nowrap;font:15px courier;line-height:0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</div>

Please remember this block can get you started but make sure you test it and adjust to your needs and desired email client support. The block uses title, price, image and URL properties from the catalog. If you use other names for those properties it can be easily changed in the code.

If you prefer to start from scratch and define the list of parameters in the block by yourself or just like the direct HTML in the email the code examples below can help you start.
Please remember to change the recommendations ID in the HTML code for the actual recommendation model you create in your project.

{% set rcm = recommendations('[[recommendationID]]','[[products count : number | 4]]', fill_with_random = "true") %}

<table cellpadding="0" cellspacing="0" width="100%" style="max-width: 1000px; text-align: center;">

{% for item in rcm %}
    <tr>
        <td style="padding-bottom: 20px;">
            <table width="100%">
                <tr>
                    <td width="50%">
                        <a href="{{ item.url }}">
                            <img src="{{ item.image }}" alt="{{ item.title }}" width="200" style="width:auto; max-width:100%; max-height:150px;" />
                        </a>
                    </td>
                    <td width="50%" style="padding:0 10px; font-size:14px;">
                        <p>
                            <a href="{{ item.url }}" style="font-size:16px; text-decoration: none; color:#1c1733">
                                {{ item.title }}
                            </a>
                        </p>
                        <p>Price: {{ item.price }}  €</p>
                        <p style="margin-top: 20px;">
                            <a href="{{item.url}}" style="background-color: #ffd500; padding:10px 20px; color:#1c1733;">
                                Show product
                            </a>
                        </p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
{% endfor %}

</table>
<table cellpadding="0" cellspacing="0" width="100%" style="max-width: 1000px; text-align: center;">

<!-- change the recommendations id for desired model id -->
<!-- lood 4 recommended products, change the number of products as desired -->
{% set rcm = recommendations('59cf98d54d539b618b307585', 4) %}

{% for item in rcm %}
    <tr>
        <td style="padding-bottom: 20px;">
            <table width="100%">
                <tr>
                    <td width="50%">
                        <a href="{{ item.url }}">
                            <img src="{{ item.image }}" alt="{{ item.title }}" width="200" style="width:auto; max-width:100%; max-height:150px;" />
                        </a>
                    </td>
                    <td width="50%" style="padding:0 10px; font-size:14px;">
                        <p>
                            <a href="{{ item.url }}" style="font-size:16px; text-decoration: none; color:#1c1733">
                                {{ item.title }}
                            </a>
                        </p>
                        <p>Price: {{ item.price }}  €</p>
                        <p style="margin-top: 20px;">
                            <a href="{{item.url}}" style="background-color: #ffd500; padding:10px 20px; color:#1c1733;">
                                Show product
                            </a>
                        </p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
{% endfor %}

</table>

When you are done with editing and styling of your email, save it to use in the abandoned cart scenario.

Vouchers

You can make use of Exponea's vouchers feature and send a personalized one-time voucher. In order to include a voucher in the email, use the line of code below.

Use the discount code {{ vouchers['10%'].assign_available() }} to get a 10% discount and pay only {{ total_price* 0.9 }}

You need to change the name of the voucher pool ("10%") and have the variable total_price defined in the jinja code of your email.

Updated 5 months ago

Email Templates


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.


We rely on cookies

to optimize our communication and to enhance your customer experience. By clicking on the Accept and Close button, you agree to the collection of cookies. You can also adjust your preferences by clicking on Manage Preferences. For more information please see our Privacy policy.

Manage cookies
Accept & close

Cookies preferences

Accept & close
Back