All Collections
Content Personalization
Automated Content Personalization
Automated Content Personalization

How to present personalized categories, brands and promotions widgets

Ido Ariel avatar
Written by Ido Ariel
Updated over a week ago

What is personalized content widget?

Currently most ecommerce sites feature static content on the homepage such as featured categories and brands.

Automated Content Personalization uses machine learning to display dynamic and relevant content such as brand and category images to each visitor.

The content source is a collection of images with text and links created once. The collection is based on a specific product attribute such as Brand or Category.
A collection typically includes more items than the number of items actually displayed. The personalization engine makes sure that each visitor sees the content relevant to them out of the larger collection and orders the items to make sure the relevant items appear first.

Examples of content widgets:

If the system does not have information about the user, the system will show trending content (by city ) and will always keep testing all content to allow new content to replace the current winners. 

If the user shows affinity toward content in the collection such as visiting categories relevant to the collection the system will show the most relevant content based on the past and current visit in a similar way to product recommendations (taking into account past orders, cart items, viewed items and categories/brands visited).  

Content can be added on all pages and not limited to the homepage.

Creating 'Add personalized content' rule

  • Use the left vertical menu to visit 'personalization' and start a new rule.

  • Select 'Add personalized content'

  • By default the rule shows a Sample collection which cannot be used in actual running rule. So if you intend to make changed and save them switch to your own collection or create one if you haven't already.

  • Select the template which fits your website look and feel.

Designing the widget

browse through the different tabs to get to know the available settings:

Here are some non trivial points you should know:

Positioning the widget

The widget is positioned based on the settings in General Settings tab.
First you need to determine the CSS selector of the element where the widget will be located. Then you can set whether the widget will appear inside before or after the element.

For example my website homepage has a section with id 'carousel' and I want the new widget to be positioned right after it.
In widget position put #carousel
And in the location select 'after element'

Changing the look of a single element

Go to 'widget item' tab

On the left side each bar represent part of the widget item such as image and text.
You can drag and drop to change order. for example dragging the text below the image will put the text below the image in the widget.

clicking each bar opens the setting. you can set many visual properties such as fonts, margins, text styles and effects.

Testing the widget

Once the widget is ready, you can click preview rule to see it on the actual page.

Setting up the media collection

The media library is available through the left menu under personalization section.

For instructions no how to create media collections please visit Creating media collections for email/site personalization


Did this answer your question?