One of the most used types of touchpoints is product recommendations wrapped in a notification. These touchpoints are broadly used by a wide range of company types. Whether you want to serve a relevant smartphone, a high-margin hotel room, or a premium service: all these kinds of content can be served in a product recommendation.

Though you can pre-select a product recommendation in the template section, we are here to show you how to create these from scratch. We recommend visiting the belonging articles when you still need to become familiar with words like content collections, positions, templates, elements, or touchpoint builder.

In order to create a product recommendation, you need to decide what to show to your audience and what this touchpoint should look like. In this article, we want to show a product recommendation for men's fashion.

Content collection

First, you need to select a content collection. This is a dynamic set of content based on specific rules. If an item does not match the rules (the item went out of stock) anymore, the item will be discarded from the collection automatically.

Position

Each touchpoint needs a position where to show on a page. We use the default bottom-right position. This position allows the notification of having a width of 420 pixels and an alignment of 20 pixels away from the horizontal and vertical border.

Preview defaults

You can set the default item that needs to be previewed in the settings object in the Templates section. In our example, we use one of our fashion items.

Step 0 - Add the position

First of all, create a template by clicking ‘Start from scratch’ → Website, since we create a notification. After the template builder opens, add a name and click on the position button to define the bottom right position. This will change the editor to the bottom right, and the notification will get the width and alignment of the position. As this is a horizontal product recommendation, we just need 1 row. The editor will look something like this:

Step 1 - Add a dynamic image

To start, drag the Dynamic Image element to the notification. Open the properties tab and select the image merge tag. Here you should add the desired image content variable, which is {{item.image}} in most cases. If you want to make the image clickable and link it to a web page, you can add the URL of your items in the ‘Action Image link’ section.

If you are wondering if this is the right variable in your project, check out the variables of the items in the content collection.

Check if the width of the image looks good, and change it according to your preferences.

Step 2 - Add persuasion, name, and description

Now add a persuasion, like ‘Recommended for you’ below the image. This can be a paragraph. After opening the properties, the global font that we use is the standard font of the template settings. We change the text colour to dark red. You can also select the projects’ theme colours by clicking on the options below the colour picker.

Though you can change a lot to this text, like paddings, alignments and spacing, we keep it simple by only changing the text colour.

After adding the persuasion, add the name or title of the notification below with the element called Title. The name will be dynamically selected from the content variable, so this should be a merge tag or handlebar. We changed the title to H2, which is slightly smaller than H1. Check if you have enough padding on the left side, otherwise, you can add 10px here for the block options. That’s it for the name!

Now we will add a description coming from the items in the content collection. Drag a Paragraph below the title. As descriptions can have a lot of characters that will make the notification look ugly, you can reduce the number of characters by truncating it. Therefore use the variable helper truncate like {{#truncate item.description 40 …}}, which means that the description gets truncated after 40 characters with three full stops…. The template will look something like this:

Step 3 - Add a button

Drag a button element below the description. This button will have the primary theme colour as the background colour. In the properties, you can change the colour. Add the action link from the content, which is {{item.url}} in most cases. Besides that, we want to see the button having a full width, so we turn off the auto width and drag the width bar to 100%. Click on the design to change the button text.

Step 4 - Add a price label

Currently, there is no easy way to overlay a text label over the image like in this example.

This will be added at a later stage.

Therefore, you can add the price as a Paragraph above the button. If your content uses special_prices or sale_prices, you need to use variable helpers to display the correct price tag. You can look in your project if you already have recommendations with these helpers and copy it, or create it by yourself, like:

{{#ifIsset item.special_price}}{{#ifEqual item.special_price item.price}}{{#price_format item.price , . ,-}}{{else}}{{#price_format item.special_price , . ,-}}{{/ifEqual}}{{else}}{{#price_format item.price , . ,-}}{{/ifIsset}}

Note that this piece of code does not work in all cases. Always test whether the prices are displayed correctly. We highly suggest saving the correct price tag as a saved row so you can reuse it for other template designs.

When using variables and helpers, the template will be filled with text. This will be reduced to the real values in the touchpoint itself.

When you feel that the template is set, you still need to place the template in a touchpoint. Therefore you should use the touchpoint builder. We keep this section short as the touchpoint builder is documented.

Step 5 - Add touchpoint

Open the journey or campaign where you want to display this touchpoint and click on ‘Add Touchpoint’ to open the touchpoint builder. Give the touchpoint a name to start.

Step 6 - Assign the template and position

Select the template you created. You need to show just one single block and no header or footer. Then select the position, which is the default bottom right. Click on ‘Next’ in the sub menu to proceed.

Step 7 - Select content collection and recommendation strategy

Use filtered content → Select existing content collection to use the content collection that you already made as preparation and that you want to be displayed in this touchpoint. Then select the recommendation strategy that you want to use. Click here to learn more about these strategies. We use the default Let the algorithm decide. Click on ‘Next’ in the sub menu to proceed.

Step 8 - Select your audience

Now select the audience that should see this touchpoint. This is up to you. In our case, we want to show this touchpoint on every page but the product page.

Step 9 - Additional settings

Now you can add extra settings to the touchpoint builder. We use a Frequency cap per user of 1 per session.

Step 10 - Preview and publish