# 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. 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](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/1a.png) 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](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/2.png) Figure 2: Sync Status 2. Click the type of widget you wish to add to your sales channel. Let us select **Brand**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/2b.png) Figure 3: List of Widgets 3. Click **Product Page** checkbox (Refer Figure 4). 4. Click **Configure Pages**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/3.png) Figure 4: Clicking Configure Pages Button 5. Click **Configure**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/4.png) Figure 5: Clicking Configure Option 6. Let us configure extension settings. * [Widget Settings](/commerce/docs/extensions/available-extensions/product-recommendation#widget-settings) * [Product Image](/commerce/docs/extensions/available-extensions/product-recommendation#product-image) * [Product Card Layout](/commerce/docs/extensions/available-extensions/product-recommendation#product-card-layout) * [Product Card Style](/commerce/docs/extensions/available-extensions/product-recommendation#product-card-style) * [Wishlist Icon](/commerce/docs/extensions/available-extensions/product-recommendation#wishlist-icon) * [Discount Label](/commerce/docs/extensions/available-extensions/product-recommendation#discount-label) * [Reviews and Ratings](/commerce/docs/extensions/available-extensions/product-recommendation#reviews-and-ratings) * [Price](/commerce/docs/extensions/available-extensions/product-recommendation#price) * [Product & Brand Title](/commerce/docs/extensions/available-extensions/product-recommendation#product--brand-title) * [Product Highlights](/commerce/docs/extensions/available-extensions/product-recommendation#product-highlights) ## Widget Settings ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/5.png) center em Figure 6a: Widget Settings br * **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](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/6.png) center em Figure 6b: Product Image Settings br * **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](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/7.png) center em Figure 6c: Product Card Layout Settings br ## Product Card Style ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/8.png) center em Figure 6d: Product Card Style Settings br * **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](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/9.png) center em Figure 6e: Wishlist Icon Settings br * **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](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/10.png) center em Figure 6f: Discount Label Settings br * **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](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/12.png) center em Figure 6g: Reviews and Ratings Settings br * **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](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/13.png) center em Figure 6h: Price Settings br * **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](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/14.png) center em Figure 6i: Product & Brand Title Settings br * **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](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/15.png) center em Figure 6j: Product Highlights Settings br * **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](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/17.png) center em Figure 6k: Active Pages br ## Add Product Recommendation Extension in Theme 1. Click **Themes** in **Appearance** section of sales channel on Fynd Platform. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/18.png) Figure 7: Themes - Sales Channel 2. Click **Edit**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/19.png) Figure 8: Clicking Edit Button 3. Select **Product Description** from **SYSTEM PAGES** dropdown. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/20.png) Figure 9: Choose Product Description 4. Choose a random product from the dropdown list (Refer Figure 10). 5. Click **OK**. ![QG1](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/21.png) 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](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/22.png) 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](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/product-recommendation/23.png) center em Figure 12: Your Website br