Handlebars templating language provides a way to create a custom layout for emails in Journey Hub. Handlebars can be used in both HTML and Listrak Composer.

Handlebars can be implemented in:

Product-based journey emails to display carted or purchased items
Custom event journeys to display data from Listrak's real-time integrations
Content Collections in broadcast emails to speed up message creation

What are Handlebars?

Handlebars is a form of templating language that is used to generate dynamic HTML. Handlebars can be used to generate email HTML or website HTML where variables are replaced with dynamic data.

Components of Handlebar Language

Learn more below about the elements of the templating language that can be used in your Listrak emails.

Basic Expressions

Expressions are the building blocks of the Handlebars language.

The most basic expression is the dynamic variable enclosed in two pairs of curly brackets. A contact's value will replace the expression when the email is sent.

{{Sku}}

Non-escaped Expressions

Expressions are HTML-escaped by default. This will convert a value such as & into &amp. If a value should not be escaped, the expression should be enclosed in three pairs of curly brackets (e.g. full website URL or product title that contains special characters).

{{{ProductLinkURL}}}

Helpers

Helpers allow Handlebars to execute simple logic procedures or help format data. The Helpers below can be used in HTML and Composer.

Helper Tag	Description	Code Example
IfCond	Compare two different values	{{IfCond SalePrice 0}} ... {{/IfCond}}
ForAll	Evaluate all items included in an array (e.g. items as the array name) Parameters: Property: Property to loop through, must be an array. Sort: Sort all items by the property. Take: Only take (show) n number of items Skip: Skip (don't show) n number of items	{{ForAll "ArrayName"}} ... {{/ForAll}} Sort by product title {{ForAll "Items" "Sort:Title"}} ... {{/ForAll}} Sort by item price: most expensive first {{ForAll "Items" "SortDesc:Price"}} ... {{/ForAll}}
FormatCurrency	Format a string, integer, or decimal as currency. Parameters: Value: Raw value to be formatted. Format: Currency format ('USD', 'FRCA', 'GBP', 'EURO') Decimals: Number of decimals to show Default value: Value show if data is invalid or null	Formatting using price as source {{FormatCurrency Price}} Formatting using price as source, displayed in US dollars with 2 decimal points {{FormatCurrency Price 'USD' 2}} Formatting using price as source, displayed in US dollars with 2 decimal points. No price is displayed if the value is null. {{FormatCurrency Price 'USD' 2 'No Price'}}

Looping

Looping allows the template to display multiple values from an array of items. Looping is commonly used when a list of items needs to be displayed. For example, items in a wishlist, a customer's cart, or a customer's order. Looping is created using the ForAll helper discussed above.

💡 The appearance of data displayed by the handlebars can be customized using standard email HTML styling. For example, you can add tables, specify font colors, font weights, and alignment.

 {{ForAll Items}}
                  <tr>
                    <td style="padding-top:12px;">
                      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
                        <tr>
                          <td style="width:72px;" class="stack">
                            <img class="item-img" src="{{ItemImageUri}}" alt="{{ItemTitle}}" width="64" height="64" style="display:block;">
                          </td>
                          <td class="stack" style="padding-left:10px;">
                            <div class="text" style="font-weight:bold; color:#111827;">{{ItemTitle}}</div>
                            <div class="small" style="margin-top:2px;">SKU: {{ProductCode}} &middot; Part #: {{ProductPartNo}} &middot; {{ProductID}}</div>
                            <div class="small" style="margin-top:6px;">
                              Status: {{ItemStatus}} (ID: {{ItemStatusId}})<br>
                              Ship status: {{ItemShippingStatus}} &middot; <a href="{{ItemTrackingUrl}}" target="_blank" style="color:#111827;text-decoration:underline;">Track</a>
                            </div>
                          </td>
                        </tr>
                      </table>
                    </td>
                    <td class="right">{{ItemQuantity}}</td>
                    <td class="right">{{ItemPrice}}</td>
                    <td class="right">{{ItemSubtotal}}</td>
                  </tr>
                  {{/ForAll}}

HTML in Listrak Composer

On-site Recommendations: Additional Options and Methods

Integration Guide: Transactional Emails

Unsubscribe Contact Form Code

Using Handlebars to Display Custom Event Data