Pages

Email recommendation settings provide basic click-and-select options for customizing how item names and prices are displayed in an email. However, if these options are not enough for you, and if you are familiar with HTML, use the item template editor to further customize how the items are displayed and what's displayed per item. The item template is a piece of HTML code that defines the structure, content, and style of a recommended item as displayed in the email. The same template is used for all the items in the recommendation.

To edit the item template of an email recommendation:

  1. In the Frosmo Control Panel, select Data Management > Recommendations > Email Recommendations.
  2. In the email recommendations list, find the recommendation you want to edit, and click its name.
  3. In the email recommendation settings view, in the Item template section, click Show template editor.
  4. In the editor, edit the item template. For more information, see Understanding the template code and Customizing the template.
  5. When you're done, to save and preview the recommendation, click Save and preview.

Understanding the template code

The following figure shows the default template code in the template editor. The code defines three pieces of content, each in its own <div> element: item image, name, and price.

Default item template code

Figure: Default template code

The code uses Mustache tags to inject a set of values into the code. The item display settings, which you define in the UI above the template editor, all correspond to a tag in the code. The following table describes the tags and shows which map to display settings.

It is recommended that you not remove any of the tags that map to display settings. Removing such a tag means that the corresponding display setting will be ignored in the final recommendation. If another user later changes the display setting through the UI, their change will have no effect.

Table: Mustache tags in the default template code

Mustache tagDisplay settingDescription
{{productImage.height}}

Display height of the item image in pixels.

The Control Panel defines this value. The default value is 200.

{{productImage.width}}

Display width of the item image in pixels.

The Control Panel defines this value. The default value is 200.

{{product.image}}

Item image URL.

The Control Panel retrieves this value from the Frosmo back end.

{{#productName.display}}

{{/productName.display}}

Item name: Display

Determines whether the item name is displayed:

  • If the Display checkbox is selected, productName.display is set to true, and the item name <div> element is displayed.
  • If the Display checkbox is deselected, productName.display is set to false, and the item name <div> element is not displayed.

You define this value in the UI.

{{productName.font-family}}Item name: Font family

Font for displaying the item name.

You define this value in the UI.

{{productName.font-size}}Item name: Font size (px)

Font size for displaying the item name.

You define this value in the UI.

{{product.name}}

Item name.

The Control Panel retrieves this value from the Frosmo back end.

{{#productPrice.display}}

{{/productPrice.display}}

Item price: Display

Determines whether the item price is displayed:

  • If the Display checkbox is selected, productPrice.display is set to true, and the item price <div> element is displayed.
  • If the Display checkbox is deselected, productPrice.display is set to false, and the item price <div> element is not displayed.

You define this value in the UI.

{{productPrice.font-family}}Item price: Font family

Font for displaying the item price.

You define this value in the UI.

{{productPrice.font-size}}Item price: Font size (px)

Font size for displaying the item price.

You define this value in the UI.

{{product.price}}

Item price.

The Control Panel retrieves this value from the Frosmo back end.

{{productPrice.currency}}Item price: Currency

Currency code or symbol for the item price.

You define this value in the UI.

The following figure shows how item details and display settings get added to the default template code, and what the final displayed item built from the code looks like.

Template content flow

Figure: Template content flow (click to enlarge)

Customizing the template

You can freely edit the template code to produce the kind of visual result you want. You can add new content, edit or remove the default content, and customize how the content is styled. The only requirement is that the code remain valid HTML and inline CSS.

You can also add additional item attributes by using the Mustache syntax {{product.attributeName}}, where attributeName is the attribute name as stored in the Frosmo back end and returned by the Product API. If the attribute exists for an item, the Mustache variable returns its value. The available attributes depend on the product tracking implemented for the site.

The following examples show customized templates and the final displayed recommendations. The examples all use the default template as a starting point.

Custom template: No item price

The following template code omits the item price element. Even if the item price Display field is selected in the UI, the recommendation never displays the price for an item.

Custom template code: No item price
<div style="padding: 10px;">
    <div style="height: {{productImage.height}}px; width: {{productImage.width}}px;
        background-image: url({{product.image}});
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;"></div>
    {{#productName.display}}
        <div style="font-family: {{productName.font-family}};
            font-size: {{productName.font-size}}px;">{{product.name}}</div>
    {{/productName.display}}
</div>

Custom template: Custom styles

The following template code bolds the item name and adds a thin top margin above the item price.

Custom template code: Custom styles
<div style="padding: 10px;">
    <div style="height: {{productImage.height}}px; width: {{productImage.width}}px;
        background-image: url({{product.image}});
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;"></div>
    {{#productName.display}}
        <div style="font-family: {{productName.font-family}};
            font-size: {{productName.font-size}}px;
            font-weight: bold;">{{product.name}}</div>
    {{/productName.display}}
    {{#productPrice.display}}
        <div style="font-family: {{productPrice.font-family}};
            font-size: {{productPrice.font-size}}px;
            margin-top: 5px;">{{product.price}}{{productPrice.currency}}</div>
    {{/productPrice.display}}
</div>

Custom template: Additional item attribute

The following template code adds an additional attribute to the item details: manufacturer name. The code gives the manufacturer name a distinct color, places the name below the item name, and displays it only if the item name is displayed. On the example site, the manufacturer name is tracked as the manufacturer property for each item, so the name is accessible in the template with {{product.manufacturer}}.

Custom template code: Additional item attribute
<div style="padding: 10px;">
    <div style="height: {{productImage.height}}px; width: {{productImage.width}}px;
        background-image: url({{product.image}});
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;"></div>
    {{#productName.display}}
        <div style="font-family: {{productName.font-family}};
            font-size: {{productName.font-size}}px;">{{product.name}}</div>
        <div style="font-family: {{productName.font-family}};
            font-size: {{productName.font-size}}px;
            color: #e03710;">{{product.manufacturer}}</div>
    {{/productName.display}}
    {{#productPrice.display}}
        <div style="font-family: {{productPrice.font-family}};
            font-size: {{productPrice.font-size}}px;">{{product.price}}{{productPrice.currency}}</div>
    {{/productPrice.display}}
</div>