First of all, determine what email template you want to use.
If you want to add a product recommendation to your email, it's convenient to add a static product to your email template first, so the styling can be used in the touchpoint.

1. Create an email template

Below you will find an example of a template in MailChimp (but it can be used in all mail tools we connect to):

This template already has a static product, a Sonos speaker. We can use the styling of this product block, in the touchpoint we are creating.

2. Create the dynamic image touchpoint

Now head over to Datatrics and create a touchpoint (if you're just getting started, it's convenient to create a campaign for all email content and create the touchpoint there). Choose the following touchpoint type:

You can filter content like you normally do in a touchpoint. So for example, filter all your products which are in stock and visible in your webshop. Maybe you only want to show products on sale, but that's up to you.

3. Add HTML to the touchpoint

Next up, is adding the HTML to our editor. Most of the time, you can copy HTML from an email tool, by inspecting the element in your browser. Example:

In the inspector, you can copy the HTML table and paste it in the Datatrics editor.

After clicking on "Update Code" and "Save as draft", it will show the same product block on the preview pane in Datatrics:

You can also write and use your own HTML code of course.

4. Make the HTML dynamic

Next up, is replacing the static content with variables, so we can dynamically fill the HTML with the right product fields from the content items in Datatrics.

So we'll replace the image URL with: {{item.image}}.
And the product name needs to be replaced with {{}}.
Everything after "{{item." is the name of the product field, so every field can be used in the dynamic image. For this example we'll add {{item.description}} and {{item.url}}, but maybe you also want to use {{item.price}}, {{item.special_price}} and/or more. For our example, the preview pane will now show the following:

5. Add the dynamic image to your mail tool

Save the touchpoint as draft and leave the HTML editor and touchpoint editor. Click on view in the touchpoint card (on hover), and you will see the following:

You'll need the imageURL and URL on the top left for in your email tool.

Go back to your email tool and create an HTML block and paste the following:

<a href="{url}"> <img src="{image-url}"> </a>

Now replace {url} with the URL from Datatrics like the one in the screenshot above (but use your own URL), and replace {image-url} with the imageURL from Datatrics (also use your own).

It should look like this:
<a href=""> <img src=""> </a>

As you can see, the imageURL contains a width and height, which you can alter to fit your template. It depends on the email tool you're using, but it's likely you'll see the dynamic image in the email editor immediately:

The final thing you need to do, is adding unique customer parameters to the URL and imageURL, which are different for each mail tool. You can find them over here:

For MailChimp, it's ?profileid=*|DT_PROFILE|*&profilesource=MailChimp, so you'll end up with something like:

<a href="*|DT_PROFILE|*&profilesource=MailChimp"> <img src="*|DT_PROFILE|*&profilesource=MailChimp"> </a>

The dynamic image is now ready to use, each and every receiver of your email will see content which is most potential for them.

(Optional) 6. Use multiple product recommendations in your template

If you want, you can show multiple product recommendations. They can use the same touchpoint, but you want to show the two, three or four most potential products to the receiver. For this, you can use the &slot=X parameter in the URL and imageURL of the touchpoint.

For example, you want to show two product recommendations. Then you'll add an HTML block with the following code for the first product:

<a href="*|DT_PROFILE|*&profilesource=MailChimp&slot=1"> <img src="*|DT_PROFILE|*&profilesource=MailChimp&slot=1"> </a>

For the second one, you'll add the following code:

<a href="*|DT_PROFILE|*&profilesource=MailChimp&slot=2"> <img src="*|DT_PROFILE|*&profilesource=MailChimp&slot=2"> </a>

Now we'll show the first and second most potential product and you won't end up with duplicates.

It is also possible to add a variable "lifetime" to cache the image and url. The value of "lifetime"  in the image and the url has to be between 1 and 36 (hours) and should be placed on the XX.  

This is how it looks like in the url:

<a href="*|DT_PROFILE|*&profilesource=MailChimp&lifetime=XX"> <img src="*|DT_PROFILE|*&profilesource=MailChimp&lifetime=XX> </a>

Did this answer your question?