Recommend Personalized Products Using Product Grids

Introduction

As marketers, we want to elevate our website into a sophisticated and responsive digital storefront that anticipates each visitor’s individual preferences. MoEngage Personalize enables you to show recommended products using product grids. By leveraging advanced recommendation algorithms in conjunction with an intuitive no-code WYSIWYG editor, you can seamlessly embed personalized product grids directly within your web interface.

This provides users with a seamless and enjoyable shopping experience by presenting them with relevant and personalized content generated from user behavior and preferences. Such personalized recommendations are more likely to be relevant and interesting to users, leading to enhanced user engagement metrics, increased click-through rates, and the potential for higher conversion outcomes for the site.

Advantages of using a product grid

• Increased sales performance: Recommending products using product grids helps users check other similar products related to their interests and products they may buy together. This increases sales and triggers users to purchase additional products.
• Personalised recommendations: With product grids, you can recommend personalized products based on the user’s interests, which creates better engagement and helps users explore more based on their interests and make purchases.
• Efficient marketing: Recommending products based on users’ behavior and interest significantly reduces your marketing costs and efforts spent on engaging general audiences who are not interested in your product.
• Builds brand awareness: Engaging users with personalized content based on their interests and behavior builds better brand awareness and reputation among the audience.
• Better user experience: Recommending products based on user interest improves user engagement and provides a better user experience, attracting more users.

We will achieve this use case by leveraging MoEngage Personalize to show recommended products using product grids.

Expected Result

User experiences personalized recommendations in product grids on your website.

• A recommendation set must be created using basic recommendations or advanced recommendations.
• If you use advanced recommendations, you must complete Mapping User Actions.

Add Product Grids

Proceed with the following steps to add product grids to your website:

1. After you have created a Recommendation set, proceed to create a new Personalize Experience. For more information, refer to Create an Experience.
2. In Step 2 (Content) of creating a web personalized experience, click Personalize in the respective variation where you want to add the product grid and your website URL.
3. Invoke the Personalize editor by clicking where you wish to add the grid to the website.
4. Select + Add Widget from the list.
5. Click the Product grid from the Select widget window pane.
6. Choose the location (before or after) to insert the element before or after the element chosen on the screen.
7. In the Edit Item Grid, you can configure Grid Appearance, Edit cards, and Map Information.

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 title style either manually or using CSS.
Grid Sub Title	Add a subtitle to your product grid. You can edit the title style either manually or using CSS.
Grid CTA	Add CTA text and define its style either manually or using CSS.

Step 2: Edit Card

This option allows you to define each recommendation’s layout, style, and individual elements (referred to as a card). The information shown in the preview (Image, Labels, Price, etc) is only for illustration purposes. This information is rendered from the recommendation mapped to the grid in Step 3 (Schedule and goals).

The edit options are listed below:

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 title style 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 title style 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 needed. You can also edit the style 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

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

   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.

2. 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 your website’s web experience goes live. If you choose to apply custom CSS to the grid and the card elements, the changes to the grid appearance will be visible once your website’s web experience is live.

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 when 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 increase engagement and click-through rates as customers explore and consider different products.	Create an 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 users are encouraged to purchase related or higher-end products that may interest them.	Create an AI recommendations set using our Frequently Bought Together or Frequently Viewed Together algorithm, and map this recommendation set when the product page is placed on the web page.

All MoEngage AI products, which were previously referred to as Sherpa AI, are now known as Merlin AI.