Skip to content

This online publication is intellectual property of Apptus Technologies. Its contents can be duplicated in part or whole, provided that a copyright label is visibly located on each copy and the copy is used in conjunction with the product described within this document.

All information found in these documents has been compiled with utmost attention to detail. However, this does not guarantee complete accuracy. Neither Apptus Technologies nor the authors shall be held liable for possible errors or the consequences thereof.

Software and hardware descriptions cited in these documents might be registered trademarks. All trade names are subject to copyright restrictions and may be registered trademarks. Apptus Technologies essentially adheres to the manufacturer’s spelling. Names of products and trademarks appearing in this document, with or without specific notation, are likewise subject to trademark and trade protection laws and may thus fall under copyright restrictions.


Product Templates

Templates define how individual product cards will be shown in an email campaign. They are composed by HTML and CSS together with Mustache templating to retrieve product attribute content.

Create template

Create a new template by clicking the prominent + icon in the top left side of the Product Templates tab. Each template have must a title and an optional description of the template can be set as well.

Email Recommendations - Product Templates - Template Home

Template design editor

The template design editor allows a user to create product card display templates for with the use of basic HTML and CSS. The code is written directly into the template design editor and updates can be previewed with a single click. Templates can include both a desktop and a mobile version.

The template design editor supports auto completion, suggestions of tags and product attributes, simple conditional content, and looping. It also shows formatting errors.

A default font pack is included for use with Email Recommendations. The pack includes the fonts Noto Sans, Hind, Arial, Arial Narrow, Cursor, DejaVu, Liberation, Serif, SansSerif, and Utopia. Only TTF (TrueType) fonts are supported. A retailer can include additional TTF fonts if they are available for Email Recommendations to access over the internet.

Font licensing

Retailers using additional fonts accessible over the internet takes full responsibility for licensing rights to the fonts.

Email Recommendations - Product Templates - Design editor

Product attributes

Product attributes are added to the template either by adding a Mustache snippet directly in the template design editor with {{ and the autocomplete function for attributes, or by clicking <> SELECT ATTRIBUTE and using the attribute list or search function.

If an attribute is added in the template but unavailable for the recommended product it will be omitted from the rendered HTML.

Conditional content

The Mustache template language provides a capability for creating dynamic product card templates using simple IF ELSE conditions. The conditions are used to change the look and feel of a product card based on the information available in eSales.

The IF ELSE conditions in Mustache allows for checking if a given variable (data field) exists or has a non-empty value. One of the most common use cases for it will be showing product's price differently, depending on whether the product has a discount or not.

An IF statement is denoted by a #-sign before the product attribute and an ELSE statement is denoted by a ^-sign, for example {{#product.rating}} or {{^product.rating}}. A conditional statement is ended with a / before the product attribute, for example {{/product.rating}}.

Preview template

The right hand side of the Template design editor has a preview area that show an example of a recommended product when it is rendered with the template. To see changes made in the template and how it reflects the rendered product, click REFRESH PREVIEW.

Email Recommendations - Product Templates - Preview template

A user can select up to 25 specific products to preview with the template by clicking ADD SAMPLES and selecting from either a list or by entering the eSales product key (or variant key) in the interface.

Email Recommendations - Product Templates - Select products

The preview area of the Template design editor is now populated with a list of the selected products that can be viewed by clicking REFRESH PREVIEW.

Email Recommendations - Product Templates - View select products

Template publish status

A template must be published to be used with a campaign. Templates, and template versions, that are saved but not published are indicated with an information marker and a text stating that The current version is not published. Templates with a mobile version are indicated by a mobile phone icon.

Email Recommendations - Product Templates - Not published template

Edit existing template

An existing template can be selected for editing from the Product Templates tab. Using the template design editor the user can perform changes to the template and preview the changes before either saving, publishing, or rolling back the changes made.

A published template that is part of an ongoing email campaign can be edited and published without affecting any emails already sent via an email service provider. If the campaign is re-sent it will however use the updated template and new images will created.

Last update: February 3, 2020