We've just released a major update to our AI product recommendation engine - a live, front end editor. 

You can now design how each recommendation widget looks with an easy to use WYSIWYG interface. 

And, you can even adjust how the AI system determines which items to recommend with simple drag and drop controls.

​

You can do all of this without relying on IT resources. The new editor will help clients

To demonstrate the feature, I will recreate the most common type of recommendation widget found on Target.com.

Here is a screenshot of the recommendation widget they currently use on their product pages. 

The rest of this post will go step by step into how to create this widget for your own product pages. 

The new action is called "Product Recommendations Widget" and is the first option when you select an Action. 

After you select the action you pick your template. Templates are ready to use out of the box. I chose the first one, shown here. 

Templates are a great starting point. 

However, we want to update the template to match the look and feel of Target.com. There are a few things we need to update including the title, widget layout, and overall design.  

The first difference are the widget titles. 

Target.com reads "More to consider" while the template default is "You might like". 

In the General Settings you have all the customization options, including the ability to change the font, size, color, and alignment. 

Here are the settings before and after. 

Next, I notice that our template has many more elements than Target's recommendation widget.

Target uses a very simple structure of image, price, and product name. In contrast, our template has product, image, sale price, original price, and ratings.

With Barilliance, changing the widget structure is easy.

I first navigate to the Widget Item" tab.

Here we are presented with a simple drag and drop interface to detail how we want each widget to be structured.

We have the option to delete sections, add sections, or rearrange them.

In this case, we drag the price to be displayed above the product title and delete the two unused sections of "Discount" and "Rating".

​

While we didn't add a new section for this widget, doing so allows your recommendation widget to display any data associated with your items in your product feed. 

Next, we need to update the look of the various widget sections. To do so, we just click on the section we want to update. 

As before, a simple edit screen is presented. Again, I'll adjust the settings to reflect the recommendation widget we are modeling.

I reduce the font size, adjust the color, and most important restrict the number of lines to 1. 

​

After these changes, our design looks like this. 

The next step is to match the layout, borders, and shadow. 

In our case, the original template had a thin black boarder and short drop shadow. Target's recommendation widget has no border. It also has greater spacing between items and no shadow. 

Again, making these changes in the editor is easy. I simply remove the border and shadow and adjust the spacing. 

We now have a new recommendation widget that mimics Targets, and are almost ready to set it live! 

The last step is to make sure the widget displays well on all device types.

We've built the recommendation widgets to be mobile responsive from the beginning. 

All templates come defined mobile breaks. However we also give you complete control on how the widget displays on any type of screen size. 

You can see how the widget will respond via the live editor.

Simply drag the bottom corner of the preview window to resize the display. The widget will respond dynamically, just as it would on a live site. 

Product recommendations are a flexible personalization tool. 

In our annual study on personalized product recommendation stats, we showed how eCommerce stores can use these recommendations to