Skip to main content

Product Recommendation

Introduction​

This extension allows you to enable and configure different product recommendations on your sales channel with a live preview. You can enable this extension in the theme. Ultimately, it will help you sell more products on your website.

note

Once you have installed this extension, it will be available in the Extensions section on Fynd Platform.

Steps to use Product Recommendation Extension​

  1. Click sales channel widget. Here, we have selected Fuschia Vine Designs.

    QG1

    Figure 1: Selecting Desired Sales Channel

    Catalogue data will be fetched automatically through synchronzation. Please wait until its status changes from Sync in Progress to Sync Completed.

    QG1

    Figure 2: Sync Status

  2. Click the type of widget you wish to add to your sales channel. Let us select Brand.

    QG1

    Figure 3: List of Widgets

  3. Click Product Page checkbox (Refer Figure 4).

  4. Click Configure Pages.

    QG1

    Figure 4: Clicking Configure Pages Button

  5. Click Configure.

    QG1

    Figure 5: Clicking Configure Option

  6. Let us configure extension settings.

Widget Settings​

QG1

Figure 6a: Widget Settings

  • Header Title - Provide a suitable heading that explains what this widget is displaying to the customer. For e.g., 'More products from this Brand'.
  • Header SubTitle - Provide a subtitle that compels the customers into purchasing. For e.g., 'These stocks are getting over soon. You may not want to miss!'.
  • Brand Icon - Upload icon of your brand.
  • Max. number of products - Enter the maximum number of products that can be shown within the widget.
  • Title Colour - Set a colour for the title text by using the colour picker or entering its hex value.
  • SubTitle Colour - Set a colour for the subtitle text by using the colour picker or entering its hex value.
  • Save - Upon clicking this button, your widget settings will be saved.

Product Image​

QG1

Figure 6b: Product Image Settings

  • Image Height - Enter the height of the product image in pixels. For e.g., 230.
  • Scale to maximum to fit the area - Enable this to autosize the product image to fit into the available area.
  • Save - Upon clicking this button, your product image settings will be saved.

Product Card Layout​

Choose a suitable layout from the available options and click Save.

QG1

Figure 6c: Product Card Layout Settings

Product Card Style​

QG1

Figure 6d: Product Card Style Settings

  • Border Radius - Set an appropriate radius (in pixels) for the border corners.
  • Background Colour - Set a colour for the background by using the colour picker or entering its hex value.
  • Padding - Set the padding inside product card (in pixels).
  • Box Shadow - Enable/Disable shadow around product card.
  • Save - Upon clicking this button, your product card style settings will be saved.

Wishlist Icon​

QG1

Figure 6e: Wishlist Icon Settings

  • Enable/Disable - Show or hide the icon that customers use to add a product to their wishlist.
  • Icon Colour - Set a colour for the wishlist icon by using the colour picker or entering its hex value.
  • Save - Upon clicking this button, your wishlist icon settings will be saved.

Discount Label​

QG1

Figure 6f: Discount Label Settings

  • Enable/Disable - Show or hide the price difference between the cost price and selling price.
  • Font Size - Set an appropriate size of the text (in pixels).
  • Font Colour - Set a font colour by using the colour picker or entering its hex value.
  • Background Colour - Set a background colour by using the colour picker or entering its hex value.
  • Position - Set a position of discount label in a product card.
  • Save - Upon clicking this button, your discount label settings will be saved.

Reviews and Ratings​

QG1

Figure 6g: Reviews and Ratings Settings

  • Show Stars - Show or hide the ratings received by the product from its customers.
  • Star Colour - Set a colour for the ratings by using the colour picker or entering its hex value.
  • Review Count - Show or hide the number of reviews received by the product from its customers.
  • Save - Upon clicking this button, your reviews and ratings settings will be saved.

Price​

QG1

Figure 6h: Price Settings

  • Enable/Disable - Show or hide the prices within the widget.
  • Font Size - Set an appropriate size of the text (in pixels) used for showing the price.
  • Font Colour - Set a colour for showing the prices by using the colour picker or entering its hex value.
  • Layout - Choose suitable layout to display original price and selling price within the widget.
  • Save - Upon clicking this button, your price settings will be saved.

Product & Brand Title​

QG1

Figure 6i: Product & Brand Title Settings

  • Font Size - Set an appropriate font size (in pixels) for the titles.
  • Font Colour - Set a colour for the titles by using the colour picker or entering its hex value.
  • Text Truncate Limit - Set the maximum number of characters beyond which the title will be trimmed.
  • Brand Name - Show or hide the brand name within the widget.
  • Layout - Choose whether to display brand and product name 'side by side' or 'one below the other'.
  • Save - Upon clicking this button, your product & brand title settings will be saved.

Product Highlights​

QG1

Figure 6j: Product Highlights Settings

  • Show Product Highlights - Show or hide highlights of a product.
  • Font Size - Set an appropriate font size (in pixels) for the highlights.
  • Font Colour - Set a colour for the highlights text by using the colour picker or entering its hex value.
  • Highlight Count - Set the maximum number of highlights to be shown within the widget.
  • Margin-top (in pixels) - Set an appropriate margin (in pixels) to be added between highlights.
  • Show Bottom Border - Show or hide the border line below highlights.
  • Save - Upon clicking this button, your product highlights settings will be saved.

In this way, the count of configured pages is reflected on the 'Brand' widget. It ensures that the product recommendations are saved successfully. Now, it is time to enable the extension in the theme.

QG1

Figure 6k: Active Pages

Add Product Recommendation Extension in Theme​

  1. Click Themes in Appearance section of sales channel on Fynd Platform.

    QG1

    Figure 7: Themes - Sales Channel

  2. Click Edit.

    QG1

    Figure 8: Clicking Edit Button

  3. Select Product Description from SYSTEM PAGES dropdown.

    QG1

    Figure 9: Choose Product Description

  4. Choose a random product from the dropdown list (Refer Figure 10).

  5. Click OK.

    QG1

    Figure 10: Clicking OK Button

  6. Go to Page section (Refer Figure 11).

  7. Select desired position for extension in Extension Positions section. Here, we have selected 'Bottom Of Product Description' (Refer Figure 11).

  8. Choose Product Recommendation from the dropdown present in Extension field (Refer Figure 11).

  9. Choose Brand from the dropdown present in Wrapper field (Refer Figure 11).

  10. Click Save.

    QG1

    Figure 11: Clicking Save Button

Final Output​

Now, visit the sales channel and you will see that the product recommendations visible on your website.

QG1

Figure 12: Your Website


Was this section helpful?