
Similar item recommendations are a valuable tool for online retailers, offering customers product suggestions closely aligned with their current interests or past purchases. These recommendations serve a dual purpose: helping customers uncover new items they may have otherwise missed, while also boosting seller revenue by highlighting products that align with customer preferences.

To take these recommendations to the next level, you can add extra context by tailoring them to individual customer interests and needs. One example of this is considering the products a customer has added to their favorites.

This use case explores the scenario of creating a dynamic content (DC) campaign featuring similar recommendations enriched with the context of customers' favorite items. This approach enables you to provide a more personalized browsing experience for your customers, while also introducing them to a wider array of products similar to their favorites. 

<figure>
<img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/add-to-favorite-main-graphics.png" alt="Recommendations of similar products with item context"  class="full no-frame">
</figure> 

## Prerequisites 
---
- [Configure an item catalog for recommendations](/docs/settings/configuration/ai-engine-configuration/engine-configuration-for-recommendations). Enable Similar recommendations.
- [Configure AI engine](/docs/settings/configuration/ai-engine-configuration/engine-configuration-for-recommendations).
- Implement a custom event for adding a product to favorites, which will be available in the customer profile. 
    In this example, the event is called `product.addToFavorite`.  
    Implement custom events in your [mobile application](/developers/mobile-sdk/event-tracking#product-added-to-favorites) or [website](/developers/web/event-tracking#declarative-tracking-custom-events).

## Process
---
In this use case, you will go through the following steps:
1. [Create an aggregate](/use-cases/dynamic-content-item-context-recommendation#create-an-aggregate) that returns products added to favorites. 
1. [Prepare AI recommendations](/use-cases/dynamic-content-item-context-recommendation#prepare-ai-recommendations).
2. [Create dynamic content](/use-cases/dynamic-content-item-context-recommendation#create-dynamic-content-campaign) with similar item recommendations using the predefined dynamic content web layer template.

## Create an aggregate
---
In this part of the process, create an aggregate that will return the products customers added to favorites.


1. Go to <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/icons/behavioral-data-hub-icon.svg" alt="Behavioral Data Hub icon" class="icon"> **Behavioral Data Hub > Live Aggregates > Create aggregate**.
2. As the aggregate type, select **Profile**.  
2. Enter the name of the aggregate.
3. AClick **Analyze profiles by** and select **Last**.  
4. Select the **product.addToFavorite** event.
5. Select the **sku** parameter.
6. Define the period from which the aggregate will return products from the event. 
7. Save the aggregate.
    <figure>
    <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/aggregate-last-product.addToFavorite-sku.png" class="full" alt="Configuration of the aggregate">
    <figcaption>Configuration of the aggregate</figcaption>
    </figure>

## Prepare AI recommendations
---
In this part of the process, you will configure a similar items recommendation with context of items that customers added to their favorites. This recommendation will be later used in the dynamic content.

1. Go to <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/icons/ai-hub-icon.svg" alt="AI Hub icon" class="icon" > **AI Hub > (AI Recommendations) Models > Add recommendation**.
2. Enter the name of the recommendation (it is only visible on the list of recommendation).
3. In the **Type & Items feed** section, click **Define**.
4. From the **Items feed** dropdown list, select an item feed.
5. In the **Type** section, choose the **Similar items** recommendation type.
6. Confirm the settings by clicking **Apply**.
7. In the **Items** section, click **Define**.
    1. Click **Add slot**.
    2. Define the minimum and maximum number of items that will be recommended to the customer in each slot.
    3. Optionally, define [Static filters](/docs/ai-hub/recommendations-v2/creating-recommendation-campaign#static-filters) and [Elastic filters](/docs/ai-hub/recommendations-v2/creating-recommendation-campaign#elastic-filters).
    4. Confirm by clicking **Apply**. 
8. Optionally, you can define the **Boosting** factors.
9. In the **Additional settings** section click **Define**.
    1.Enable the **Item context from analytics (aggregate, expression)** switch.
    2. From the dropdown list select the created you created [in this part of the process](/use-cases/dynamic-content-item-context-recommendation#create-an-aggregate).
    3. Click **Apply**. 
9. In the right upper corner, click **Save**.

## Create dynamic content campaign
---
Create a dynamic content campaign with recommendations of similar products to those added to favorites using the predefined web layer dynamic content template. This dynamic content will be displayed as a pop-up on your site for the customers who have added products to their favorites.

1. Go to <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/icons/experience-hub-icon.svg" alt="Experience Hub icon" class="icon" > **Experience Hub > Dynamic content > Create new**.
2. Enter the name of the dynamic content.
3. Choose the **Web layer** type.
4. In the **Audience** section, click **Define**.
    1. In the **New Audience** section, click **Define conditions**.
    2. From **Choose filter** dropdown menu, choose **product.addToFavorite** event.
    3. Define the period from which the segmentation will return customers.
    4. Confirm the settings by clicking **Apply**.
5. Confirm the settings by clicking **Apply**.
### Define content
5. In the **Content** section, click **Define**.
6. In the **Content** tab, click **Create Message**.
7. From the list of template folders, select a folder with the predefined **Web layer templates**.  
    **Result**: You are redirected to the list of predefined templates.
    <figure>
    <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/web-layer-templates.png" class="full" alt="Web layer templates folder">
    <figcaption>Web layer templates folder</figcaption>
    </figure>
8. Select the **Recommendations** template.
    **Result**: You are redirected to the template builder.

   <div class="admonition admonition-note"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div><div class="admonition-body"><div class="admonition-content">

   You can edit the template in two ways, by editing the code of the template ([add inserts](/docs/campaign/dynamiccontent/creating-dynamic-content-templates/dynamic-content-template-builder#adding-a-snippet-to-the-template-code), [add variables](/docs/campaign/dynamiccontent/creating-dynamic-content-templates/dynamic-content-template-builder#adding-a-variable)) and/or by [filling out the form in the Config tab](/use-cases/dynamic-content-item-context-recommendation#edit-the-form-in-the-config-tab). In this use case, we will use the capabilities of the predefined Config tab.

   </div></div></div>


#### Edit the form in the Config tab 
The form in the **Config** tab is already filled in with default values. You can keep them or change them to fit your business needs.  

1. From the **Recommendation campaign** dropdown list, select the ID of recommendation campaign you created [in the previous step](/use-cases/dynamic-content-item-context-recommendation#prepare-ai-recommendations). You can find it by typing its name or ID in the search box.
2. In the **Header text** field, define the header text to appear in the popup message.
3. In the **Currency** field, specify the currency in which you want to display the prices of the recommended products.
4. In the **Bottom text** field, define the copy you want to appear in this section. 
5. In the **Font** field, define the font of all text displayed in the dynamic content.
6. Define the colors in the **Bottom bar background** and **Bottom bar text color** fields.  
7. Choose the most suitable carousel scrolling method for you by enabling one or all toggles at the same time:  
    - **Carousel autoplay**: activation of this toggle allows automatic scrolling of items in the carousel;
    - **Carousel loop**: activation of this toggle allows users to navigate to the first article in the carousel by clicking the arrow after the last article displayed in the carousel;
    - Enabling these two options at the same time will combine these functionalities. In this case, the recommendation carousel will scroll automatically and return to the first item automatically after displaying the last one. 
    - If you don't activate any of the toggles, users will have to scroll through the carousel on their own, and when they get to the last item, it won't automatically redirect them to the beginning of the carousel. 
8. In the following fields, define the item amount that you would like to display in small, medium, large and extra large screens. 
7. After you make changes to the template, you can check the preview.
    1. Click the **Preview Contexts** button on the upper left side.
    2. Enter the ID of a customer and define the product context.
    3. Click **Apply**.
  
   <div class="admonition admonition-important"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div><div class="admonition-body"><div class="admonition-content">

   If you are using custom attributes in your product feed, you need to replace the names of the standard attributes used in the template code with the names of the attributes used in your feed. In our case, we changed the names of following attributes (according to the custom attribute names used in our product feed):
     - `link` -> `productUrl`
     - `imageLing` -> `image`
     - `title` -> `name`
     - `item.price.value`-> `item.price`
     - `item.salePrice.value` -> `item.salePrice`

   </div></div></div>

4. If the template is ready, in the upper right corner click **Save this template > Save as**.
5. On the popup:
    1. In the **Template name field**, enter the name of the template.
    2. From the **Template folder** dropdown list, select the folder where the template will be saved.
    3. Confirm by clicking **Apply**.
6. To continue the process of configuring the dynamic content campaign, click **Next**.
7. To save your content changes, click **Apply**.

### Define schedule and display settings
1. In the **Schedule** section, click **Define** and set the time when the message will be active. 
2. In the **Display Settings** section, click **Define**.
3. Specify circumstances for dynamic content to be displayed. Optionally, you can also define the Advanced options. In our case, we will define the frequency of dynamic content to be displayed to **Once per day**. You can also define the type of device you want to show your dynamic content.
4. Click **Apply**. 
5. Optionally, you can define the UTM parameters and additional parameters for your dynamic content campaign.  
    <figure>
    <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/dc-recommendation-carousel-similar.png" class="large" alt="Dynamic content configuration">
    <figcaption>Dynamic content configuration</figcaption>
    </figure>
6. Click **Activate**.  


## Check the use case set up on the Synerise Demo workspace
---
You can check the configuration of each step from this use case in our Synerise Demo workspace:

- [Aggregate](https://app.synerise.com/analytics/aggregates/8b2c2e9e-24e0-30ff-aca6-a9f024a99306)
- [AI Recommendation](https://app.synerise.com/ai-v2/recommendations/CWP9JaQ05YAB)
- [Dynamic content](https://app.synerise.com/campaigns/create/84798cba-0cc3-4810-9207-114bdcf7989c)

If you’re our partner or client, you already have automatic access to the **Synerise Demo workspace (1590)**, where you can explore all the configured elements of this use case and copy them to your workspace.  

If you’re not a partner or client yet, we encourage you to fill out the contact [form](https://demo.synerise.com/request) to schedule a meeting with our representatives. They’ll be happy to show you how our demo works and discuss how you can apply this use case in your business.

## Read more
---
- [Aggregates](/docs/analytics/aggregates)
- [Dynamic content](/docs/campaign/dynamiccontent)
- [Dynamic content template builder](/docs/campaign/dynamiccontent/dynamic-content-template-builder)
- [Recommendations](/docs/ai-hub/recommendations-v2)