> ## Documentation Index
> Fetch the complete documentation index at: https://moengage.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Recommend Products to Increase the Average Cart Size

# Introduction

In the world of e-commerce, increasing the average cart size is a crucial goal for marketers looking to maximize revenue and profitability. By enticing customers to add more items to their shopping carts, businesses can unlock a world of untapped potential.

In this article, we will use Recommendation and Web Personalization features of MoEngage to create product recommendations to increase the average cart size.

# Expected Result

Users will see the personalized web page with recommended products.

<img src="https://mintcdn.com/moengage/TTNPRzWn21XF5uj0/images/moengage_fc727e.png?fit=max&auto=format&n=TTNPRzWn21XF5uj0&q=85&s=4a40a0c6eb3f92c45c3d87032c65770f" alt="image-20240120-170003.png" width="2878" height="1638" data-path="images/moengage_fc727e.png" />

<Tip>
  * Events to track the action of a user searching for products, adding a product to a cart or adding a product to a wishlist, completing the purchase, and each action’s related information such as the platform, product name, category, brand, price. To understand how to track events, refer to the [Developer Guide](/developer-guide/introduction).
  * Mapping of the tracked events above to concerned MoEngage events. In this example, the custom event of adding a product to a cart or buying now will be mapped to "Added to Cart" and the custom event of completing a purchase will be mapped to "Product Purchased". For information on mapping custom events to MoEngage events, refer [here](/user-guide/content/recommendations/prerequisites/map-user-actions-settings).
  * A catalog and a respective feed that has a list of available products and related information such as the title, category, brand, and price. Set the feed to refresh at a suitable interval so that the latest information can be maintained. For more information on product catalogs and feeds, refer [Catalogs](/user-guide/content/recommendations/prerequisites/catalogs).
  * Integration of the MoEngage Web SDK with your website to create a personalized web experience. For more information, refer to [Integrate Web SDK](/developer-guide/personalize-sdk/sdk-integration/web-personalization-v2).
  * Ad blockers disabled in the browser. The personalization editor will not load if ad blockers are enabled.
</Tip>

# Create a Recommendation

Before creating our personalized experience, let us create a recommendation based on the user action:

1. Navigate to the MoEngage Dashboard and select **Content** > **Recommendations** from the left navigation. The Recommendations page is displayed. For more information, refer to [Creating User Action Recommendations](/user-guide/content/recommendations/basic-recommendations/user-actions-model).
2. At the top right corner, click **+ Create recommendation**. It takes you to the first step "Select recommendation model".
   <img src="https://mintcdn.com/moengage/BlcsVkkZu61NB-XQ/images/moengage_47e1ea.png?fit=max&auto=format&n=BlcsVkkZu61NB-XQ&q=85&s=2cc212d8bf651877b5498dcda97460db" alt="2.png" width="5432" height="2724" data-path="images/moengage_47e1ea.png" />
3. Under **Predictive**, click the **Frequently bought together items** card. This will help in recommending items that the user would like to add to the cart by using the information about the item they added to the cart recently and previous purchases of your users.
4. Click **Next**. It takes you to the second step "Create recommendation". Enter the following details:
   * **Recommendation name**: Enter a name for the recommendation. For example, "DemoRecommendations". This will be the name through which you will refer the output of this recommendation model.
   * **Recommendation description**: Enter a description for the recommendation. This description will help you understand what the model is aimed at.
   * **Catalog**: Select the catalog that has all the list of products offered by you with all related information.
     <img src="https://mintcdn.com/moengage/xeb_76Bworf1GG6P/images/moengage_955c7d.png?fit=max&auto=format&n=xeb_76Bworf1GG6P&q=85&s=e8ee0c4f497f7a642fa55e151e91ef60" alt="image-20240120-112909.png" width="2774" height="1542" data-path="images/moengage_955c7d.png" />
5. Click **Create** to save the changes and run the model.\
   Please note that this will take 24 hours. You can find the status of the model on the Recommendations home page:
   <img src="https://mintcdn.com/moengage/rmgWdhG7TCISpEIz/images/moengage_d67d04.png?fit=max&auto=format&n=rmgWdhG7TCISpEIz&q=85&s=8b41c28568e5fac26589914971bdc1f7" alt="image-20240120-113731.png" width="2774" height="512" data-path="images/moengage_d67d04.png" />
   The Recommendation engine shares the set of products a user might prefer to buy with the product in their cart based on the users' historical actions.

Now that we have created the recommendation, let us create our personalised experience to nudge people about items that they can buy with the items they are about to purchase.

# Create a Personalized Experience

In this section, let us create a personalized experience that you would like your users to have in your website.

## Step 1: Target Users

1. Navigate to the sidebar on the left and click **Personalize** **>** **All Experiences** and click **+ Experience**, or click **+ Create new** > **Experience** > **Web**.
   <img src="https://mintcdn.com/moengage/2kQqTYC5RUPSd8kI/images/moengage_40ed9a.png?fit=max&auto=format&n=2kQqTYC5RUPSd8kI&q=85&s=4fcb04211e5c26702fc9bcf744ab067a" alt="UC-88.png" width="1440" height="1288" data-path="images/moengage_40ed9a.png" />
   You are taken to the first step "Target users" of defining a personalized experience.
2. Enter the following details:
   * **Experience name**: A name for the personalisation you are building. For example, "Recommendations".
   * **Experience Tags**: Add tags here to later identify this among the other personalized experiences you will be having.
     <img src="https://mintcdn.com/moengage/60BzFdXTJDO5dnCb/images/moengage_336977.png?fit=max&auto=format&n=60BzFdXTJDO5dnCb&q=85&s=7a2a12f626a293e9ca6170a91616ce0a" alt="image-20240120-114533.png" width="2774" height="712" data-path="images/moengage_336977.png" />
3. Under **Target Audience**, click **+ Add Audience**, select **All Users** (a segment we have created in the past) and then click **Select**.
   <img src="https://mintcdn.com/moengage/OQ0V9ibjQLpsyCSD/images/moengage_0e1074.png?fit=max&auto=format&n=OQ0V9ibjQLpsyCSD&q=85&s=8346b43d4b2bc33f43ebe3a842692331" alt="image-20240120-114855.png" width="2880" height="1630" data-path="images/moengage_0e1074.png" />
   Or click **+ New Audience** to define the target audience. <img alt="image-20240120-114653.png" src="https://mintcdn.com/moengage/431DqtwGIOyvyx6H/images/moengage_8c7e8c.png?fit=max&auto=format&n=431DqtwGIOyvyx6H&q=85&s=51639f457b864941817f8b1d2eb41d4f" width="2774" height="828" data-path="images/moengage_8c7e8c.png" />
4. Click **Next** to move to the second step "Content" where you can define the content that will go into your campaign.

## Step 2: Content

1. Clicking **Next** in the first step "Target users" will display the URL(s) to personalize pop-up. We can use this to define where we would like to show the defined personalization in our website.\\
   <img src="https://mintcdn.com/moengage/fVqFKGn_bbcOn3ck/images/moengage_26279a.png?fit=max&auto=format&n=fVqFKGn_bbcOn3ck&q=85&s=31ad492cc5e17dbcbad5f354639ce838" alt="image-20240120-115200.png" width="2880" height="1622" data-path="images/moengage_26279a.png" />
2. Select the **Multiple Pages** option.
3. Define the logic in the **URL** section.
   <img src="https://mintcdn.com/moengage/T-dEj4C-7pywzBS3/images/moengage_a3ebc7.png?fit=max&auto=format&n=T-dEj4C-7pywzBS3&q=85&s=980e7e8a3c5125fe6ab03127ecdbe147" alt="UC-17 2.png" width="1274" height="676" data-path="images/moengage_a3ebc7.png" />
4. In the input box under **Personalize URL**, enter the URL on which we will do the setup and click **Validate SDK setup**. This will check if the SDK is installed on the pages.
   <img src="https://mintcdn.com/moengage/_fazdN5K6hQMBuV9/images/moengage_38dbbe.png?fit=max&auto=format&n=_fazdN5K6hQMBuV9&q=85&s=ab98f9248669e448cbcd1e65daf3b715" alt="UC-17 1.png" width="1276" height="746" data-path="images/moengage_38dbbe.png" />
5. Click **Personalize URL** to open our website in the editor. You are prompted to define the split of users—how many should see the personalized view of this experience.
6. Click **+ Variation** to add multiple variations if required and define the same.
   <img src="https://mintcdn.com/moengage/2FjM3dGfEH1CYo8k/images/moengage_651283.png?fit=max&auto=format&n=2FjM3dGfEH1CYo8k&q=85&s=8fd442c031cef0dbfa8677d34bd1a7fb" alt="image-20240120-122604.png" width="2762" height="1628" data-path="images/moengage_651283.png" />
7. Click **Personalize** for the required variation to open the website in the editor in a new tab.\
   **Note:** You can personalize the content for all variations except the **Default** variation. <img alt="image-20240120-122405.png" src="https://mintcdn.com/moengage/Deli0Qwc2s7oDHRm/images/moengage_95c37d.png?fit=max&auto=format&n=Deli0Qwc2s7oDHRm&q=85&s=087549c08a1bec041e20d17924ce086a" width="2880" height="1722" data-path="images/moengage_95c37d.png" />
8. Select any element in the loaded page to edit it. With this, you can perform changes from editing a name to introducing new elements. <img alt="image-20240120-123006.png" src="https://mintcdn.com/moengage/50ZszvUJB4M_6y_L/images/moengage_e9922d.png?fit=max&auto=format&n=50ZszvUJB4M_6y_L&q=85&s=fcc91e0b1026bdc28d4a524f190558ce" width="2880" height="1628" data-path="images/moengage_e9922d.png" />
9. After you select the element, the following buttons are displayed:
   <img src="https://mintcdn.com/moengage/B1ZqBU-ISgaoSx_O/images/moengage_577490.png?fit=max&auto=format&n=B1ZqBU-ISgaoSx_O&q=85&s=b4b1fe546645d4824b8f085a6e7678f7" alt="Screenshot 2024-01-20 at 6.04.04 PM (1).png" width="398" height="58" data-path="images/moengage_577490.png" />
   **Note:** This option is available for all variations except the default variation and lets you personalize the content for each variation.
10. For our case, select the third option. The Select widget pop-up window is displayed.
11. Select **Product grid**, which will have the recommended items. <img alt="Screenshot 2024-01-20 at 6.08.49 PM.png" src="https://mintcdn.com/moengage/xGyg9rXr6djolSrt/images/moengage_de459f.png?fit=max&auto=format&n=xGyg9rXr6djolSrt&q=85&s=bae56a50cfc6621b2adb099b105b01d5" width="2878" height="1624" data-path="images/moengage_de459f.png" />
12. You are prompted to select a location to define whether the grid should be added before or after the selected element. In this example, select "Before". <img alt="Screenshot 2024-01-20 at 6.09.33 PM.png" src="https://mintcdn.com/moengage/iCae3l_a7eOJMTbz/images/moengage_20da1f.png?fit=max&auto=format&n=iCae3l_a7eOJMTbz&q=85&s=1e7588d4cce4c7df16c74db54d1d5d7d" width="2878" height="1624" data-path="images/moengage_20da1f.png" />
13. Click **Next**. The Edit Item Grid pop-up window is displayed where you can define the following:
    * How the grid should appear (in terms of the design elements, position, layout).
    * All the placeholders to be shown in the grid.
    * Mapping information to the concerned placeholders. <img alt="image-20240120-124122.png" src="https://mintcdn.com/moengage/wjYnJKL0xml-g3HM/images/moengage_423593.png?fit=max&auto=format&n=wjYnJKL0xml-g3HM&q=85&s=28d1cfac40e0724ff7b58065471c98b5" width="2878" height="1624" data-path="images/moengage_423593.png" />
14. In step 1 "Grid Appearance", select the layout you want, define the title, sub-title, and CTA by clicking the concerned options on the right side of the pop-up.
    1. In our example, select a different design and make it a 3-item list.
    2. Enter the title “Frequently bought together items”.
    3. Edit the Grid CTA to position the button better. <img alt="image-20240120-125042.png" src="https://mintcdn.com/moengage/T-dEj4C-7pywzBS3/images/moengage_a1ff2d.png?fit=max&auto=format&n=T-dEj4C-7pywzBS3&q=85&s=7305838e3460a7e5566ab89b3290946a" width="2878" height="1624" data-path="images/moengage_a1ff2d.png" />
15. In step 2 "Edit Card", define how each card in the grid will look like.
    1. For this example, disable the Labels, Rating, and Reviews.
    2. Change the CTA button name. <img alt="image-20240120-125611.png" src="https://mintcdn.com/moengage/QVZKszouQuxXOzFr/images/moengage_1b0558.png?fit=max&auto=format&n=QVZKszouQuxXOzFr&q=85&s=d263f372156c2d330c295bcbe60acbf6" width="2878" height="1624" data-path="images/moengage_1b0558.png" />
16. In step 3 "Map Information, select [the recommendation that we have generated](/user-guide/use-cases/recommendations/how-to-recommend-products-to-increase-the-average-cart-size#create-a-recommendation) as mentioned above. <img alt="image-20240120-125815.png" src="https://mintcdn.com/moengage/QRy8rcYszbTJNwGr/images/moengage_b09f55.png?fit=max&auto=format&n=QRy8rcYszbTJNwGr&q=85&s=0571cb23f126f0cda247e874b8feb101" width="2878" height="1624" data-path="images/moengage_b09f55.png" />
17. Map the information that the generated recommendation has to the concerned attributes here using the drop-down lists. <img alt="image-20240120-130026.png" src="https://mintcdn.com/moengage/ME-DtlELD2N8TrcF/images/moengage_c12e9a.png?fit=max&auto=format&n=ME-DtlELD2N8TrcF&q=85&s=5f4a43fb9777dff09af29b6fd28a3c6a" width="2878" height="1624" data-path="images/moengage_c12e9a.png" />
18. Click **Save**. It will help us see how the placement of the grid is and the other edits are. You can click this added element to add more changes. <img alt="image-20240120-130134.png" src="https://mintcdn.com/moengage/fUSb9kG75-iJ0JuL/images/moengage_e3b692.png?fit=max&auto=format&n=fUSb9kG75-iJ0JuL&q=85&s=b3b0e0d688a20fd7a972e6fa14d5ab38" width="2878" height="1624" data-path="images/moengage_e3b692.png" />
19. Add Click Tracking to any of these elements by selecting it and selecting the icon shown in the following image: <img alt="Screenshot 2024-01-20 at 6.33.29 PM.png" src="https://mintcdn.com/moengage/_fazdN5K6hQMBuV9/images/moengage_3bdf37.png?fit=max&auto=format&n=_fazdN5K6hQMBuV9&q=85&s=271337b0d0fd30ccb06b3636391bea06" width="2878" height="1624" data-path="images/moengage_3bdf37.png" />
20. After completing all edits, click **Save & exit** at the top right. <img alt="image-20240120-130530.png" src="https://mintcdn.com/moengage/50ZszvUJB4M_6y_L/images/moengage_e8d646.png?fit=max&auto=format&n=50ZszvUJB4M_6y_L&q=85&s=484a8fe66eb2de8207b30f149b8ea26d" width="2878" height="1624" data-path="images/moengage_e8d646.png" />
    This will close this tab and take you back to the Experience definition page in the MoEngage dashboard. <img alt="image-20240120-130624.png" src="https://mintcdn.com/moengage/B1ZqBU-ISgaoSx_O/images/moengage_535442.png?fit=max&auto=format&n=B1ZqBU-ISgaoSx_O&q=85&s=de7bdaba5adfb24b9f83ce5b31b96b9a" width="2878" height="1624" data-path="images/moengage_535442.png" />
21. Click **Next** to move to the third step "Schedule and goals" where you can define the schedule and goal of your experience.

## Step 3: Schedule and Goals

1. In the **Send experience** section, select **Active continuously** and define when to start and end this experience.
   <img src="https://mintcdn.com/moengage/QVLVnEBaZpVMZgLT/images/moengage_9fcc89.png?fit=max&auto=format&n=QVLVnEBaZpVMZgLT&q=85&s=075633e6194a24d7dc40cf2d6e695ee5" alt="image-20240120-130725.png" width="2878" height="1624" data-path="images/moengage_9fcc89.png" />
2. In the **Conversion goals** section, define the conversion goal based on your requirements.
3. Under **Delivery controls**, from the **Experience Priority** drop-down, select a priority. For more information, refer to [Create Experience](/user-guide/personalize/client-side-personalization/client-side-personalization/create-client-side-personalization-experience).
4. Click **Publish**.

# Conclusion

In this article, we used Recommendation and Web Personalization features of MoEngage to create product recommendations to increase the average cart size.

Now that we have published the personalized experience, head to the [Analyzing section](/user-guide/personalize/client-side-personalization/client-side-personalization/experience-analytics) to understand how your experience is performing.
