Personalized Recommendations with Product Grids

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.

ProductGrid.png

Steps to Add Product Grids

library_add_check

Prerequisites

Create a Recommendation set using either Basic Recommendations or Sherpa AI Recommendations.

  1. Once 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 of creating a Personalized Web Experience, select the option to add a new element to your website in the visual editor. 
  3. Invoke the Personalize editor by clicking where you wish to add the grid to the website.
  4. Click on the + icon in the editor. The Select Widget screen appears.
  5.  Click Product grid.
  6.  Choose the Location (Before or After) to insert the element before or after the element chosen on the screen.
  7. The Edit Item Grid screen appears. 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

    Choose 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.

    EditCard.gif

    Step 3: Map Product Grid to Recommendations

    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.

    MapInformation.gif

  8. 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.
  9. 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.

Once the experience with the recommended product grid goes live, you will be able to 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 displaying 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.

 

  1.  

 

Was this article helpful?
0 out of 0 found this helpful

How can we improve this article?