Edit in JSFiddle

// Request personalized recommendations.
ScarabQueue.push(['recommend', {
    logic: 'PERSONAL',
    containerId: 'personal-recs',
    templateId: 'simple-tmpl',
}]);

// Footer code. Should be the last ScarabQueue call on the page.
ScarabQueue.push(['go']);

<!-- Header code. Loads the scarab-v2.js for the demo merchant 1DF86BF95CBE8F19. Don't forget to replace it with your own Merchant ID! -->
<script>
var ScarabQueue = ScarabQueue || [];
(function(id) {
  if (document.getElementById(id)) return;
  var js = document.createElement('script'); js.id = id;
  js.src = '//cdn.scarabresearch.com/js/1DF86BF95CBE8F19/scarab-v2.js';
  var fs = document.getElementsByTagName('script')[0];
  fs.parentNode.insertBefore(js, fs);
})('scarab-js-api');
</script>

<!-- Template for rendering recommendations -->
<script type="text/html" id="simple-tmpl" >
<![CDATA[
    <h4>Recommended for you</h4>
    {{ for (var i=0; i < SC.page.products.length; i++) { }}
      {{ var p = SC.page.products[i]; }}
      <span data-scarabitem="{{= p.id }}" style="display: inline-block" class="rec-item">
         <a href="{{=p.link}}">
          <img src="{{=p.image}}" class="rec-image">
          <div>{{=p.title}}</div>
        </a>
        <div>{{=p.price}} €</div>
      </span>
    {{ } }}
]]>
</script>

<!-- The container where the recommendations are rendered -->
<div id="personal-recs"></div>
body {
    background: white;
    font-family: sans-serif;
}
.rec-item {
    text-align: center;   
}
.rec-image {
    width: 80px;
}