Overview

You can leverage MoEngage Personalize to show recommended products using product grids. This provides users with a seamless and enjoyable shopping experience by presenting them with relevant and personalized content that is generated from user behavior and preferences. Such personalized recommendations are more likely to be relevant and interesting to users leading to increased engagement, click-through rates, and conversions for the site.

With MoEngage Personalize, you can now harness the power of our Recommendation algorithms combined with our no-code WYSIWYG editor and add recommended product grids directly to your website.

In this article, we will learn how to leverage MoEngage Personalize to show recommended products using product grids.

Expected Result

Users will see the personalized recommendations with product grids.

library_add_check

Prerequisites

Create a Recommendation set using either Basic Recommendations or Sherpa AI Recommendations.
If you are using Sherpa AI Recommendations, ensure that you have completed Mapping User Actions.

Add Product Grids

After you have created a Recommendation set, proceed to create a new Personalize Experience. For more information, refer to Create an Experience.
In Step 2 "Content" of creating a personalized web experience, select the option to add a new element to your website in the visual editor.
Invoke the Personalize editor by clicking where you wish to add the grid to the website.
Click the + icon in the editor. The Select widget pop-up window is displayed.
Click Product grid, which will have the recommended items.
Choose the Location (Before or After) to insert the element before or after the element chosen on the screen.
The Edit Item Grid pop-up window is displayed. There are three steps to add a Product Grid, and they are:

Step 1: Grid Appearance

Specify the details for the grid's layout. The following options are available:

Field	Description
Grid Layout	Select the layout and specify the following: Columns Grid Dimensions (Height, Width, Radius, and Background) Grid Scroll (Size, Opacity, and Arrow color) Border Properties (Style, Width, and Color)
Grid Title	Add a title to your product grid. You can edit the style of the title either manually or using CSS.
Grid Sub Title	Add a subtitle to your product grid. You can edit the style of the title either manually or using CSS.
Grid CTA	Add CTA text and define its style either manually or using CSS.

Grid Appearance.gif

Step 2: Edit Card

This option lets you define the layout, style, and individual elements of each recommendation (referred to as a card). The information shown in the preview (images, labels, price, and so on) is only for illustration purposes. The information will be rendered from the Recommendation mapped to the grid in Step 3). The following options are available:

Field	Description
Layout	Choose the Layout and specify the Dimensions, Margin, and Border Properties.
Title	Add a title to your product grid. You can edit the style of the title either manually or using CSS.
Sub Title	Add a subtitle to your product grid. You can enable or disable this field as required. You can edit the style of the title either manually or using CSS.
Image	You can enable or disable this field as required. You can specify the image layout and dimensions and edit the image style manually or using CSS.
Label	Each card has two labels by default. You can see them in the preview and enable or disable them as required. You can edit the style of each label either manually or using CSS.
Price	Each card has two price elements and a discount element. You can enable or disable them as required. You can edit the style of each element either manually or using CSS.
Rating	Each card has a rating element. You can enable or disable it as required. You can edit the style either manually or using CSS.
Review	Each card has a review element. You can enable or disable it as required. You can edit the style either manually or using CSS.
CTA	Each card has two CTAs by default. You can see them in the preview and enable or disable them as required. You can edit the style of each CTA either manually or using CSS.

Step 3: Map Information

Map the Product Grid to Recommendations. The following options are available:

Field	Description
Name of your grid	This is the name of your product grid and is displayed on the Experience Analytics page of the MoEngage dashboard to show user interaction stats.
Choose your recommendation	Select the Recommendation to which your Product Grid should be mapped.
Map Recommendations from	In this section, you can map the individual elements in your product grid to attributes in the chosen Recommendation, as illustrated in the following image.

Click Save to add the Product Grid to the webpage. The visual editor will show the product grid with placeholder values for the product image and the individual elements on the card. Actual values from the product catalog will be visible once the web experience goes live on your website.
If you choose to apply custom CSS to the grid as well as the card elements, the changes to the grid appearance will be visible once the web experience goes live on your website.

Conclusion

In this use case, we used MoEngage Personalize to show recommended products using product grids.

After the experience with the recommended product grid goes live, you can track the stats related to the product grid in the Analytics section of the experience. For more information, refer to Experience Analytics.

Common Use Cases

Use Case	Description	How to Achieve It?
Recently browsed or added to cart product grids	By seeing products that have been browsed recently or added to the cart, the user feels that the website is aware of their interests, which can increase loyalty and lead to repeat visits and purchases. Displaying recently browsed products is time-saving because the user does not have to search for the product again. This convenience leads to a positive user experience and can encourage customers to return to the website in the future. It also reminds customers of products they were interested in and may have forgotten about.	Create a Basic recommendations set corresponding to the appropriate User action and map this recommendation set at the time of placing the product page on the web page. This product grid can be placed on the homepage of your website for increased engagement.
Recommend similar products	By recommending similar products, users are presented with a wider selection of products that align with their interests. This can lead to increased engagement and click-through rates as customers explore and consider different products.	Create a Smart AI recommendations set using our similar items algorithm and map this recommendation set at the time of placing the product page on the web page. This product grid can be placed on the product description pages of individual products.
Upsell or Cross-sell opportunities	Recommending frequently bought or viewed products can be used for cross-selling and upselling, where a user is encouraged to purchase related or higher-end products that may be of interest to them.	Create a Smart AI recommendations set using our Frequently Bought Together or Frequently Viewed Together algorithm and map this recommendation set at the time of placing the product page on the web page.