Skip to content

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.

Disclaimer

App design and features are subject to change without notice. Screenshots, including simulated data visible, are for illustrative purposes only.

Create template

Create a new template by clicking the prominent + icon in the top right 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.

Email Recommendations - Product Templates - Design editor

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, see the example below. A conditional statement is ended with a / before the product attribute.

Example

The following example has a product catalogue where products on sale have the attribute discount specifying the discount percentage for a given product. If a product is on sale the discounted price should be shown in bold text after the original price. If a product is not on sale (the discount attribute does not have any value) only the current price should be shown.

{{#product.discount}}
  <!-- Price layout for product with discount value -->
  {{product.original_price}}
  <b>{{product.current_price}}</b>
{{/product.discount}}
{{^product.discount}}
  <!-- Price layout for product without discount value -->
  {{product.current_price}}
{{/product.discount}}

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.

×