Including visualized ribbons such as “free delivery” or “new” in Nosto’s recommendations is fairly easy, but requires some additional attributes as product tagging on the PDP and some amendments in Nosto’s recommendation template.

Besides the mandatory attributes that are mapped to Nosto via tagging you should extend the tagging to include ribbon’s image url inside optional meta-data fields tag1-3. In case you want to use more than one ribbon per a product as in the example, map all applicable ribbon urls. Mapped ribbon images are later applicable in the templates. (See highlighted area below).

Include each ribbon as the ribbon’s image url similarly to product image (Read tagging product pages). While reviewing the site’s source code, the tags should appear as here (two images).

Next, amend the Template Html

After doing the extra tagging, you should create a conditional on the recommendation template, so if the product has the tag number one it will display the image as a ribbon on the Nosto recommendation:

The Template HTML should look somewhat like below. Once you have done all these steps, you should send a request to support@nosto.com so we can reindex your site to start to display ribbons on Nosto´s recommendations.

An additional method would be mapping a value to tag-fields and return the actual ribbon based on the value returned on the template. This is more suitable method if the image urls change rapidly and you would like to control the ribbon’s layout with a value instead of absolute url.