Product Recommendation helps to structure your store's outlook personalized cross-sell and up-sell proposals in page footer to encourage conversions and increase cart value by automated recommendation based on product views, sales and browsing data gathered from your business.


If you find it difficult to make the widgets display on your storefront or want to adjust their positions, please follow this instruction as reference:


Step 1: Use browser inspector to find the ID or Class Name of an element. 

  • The browser inspector is a browser feature that allows you to view specific snippets of a web page element’s HTML and CSS.  You can isolate specific elements or tags and view the corresponding CSS styles to easily test changes as well as copy the code for customization.
  • On your product page: Right click >> Choose Inspect >> You will see the Inspector Window of your Product page. 



  • How does Web Inspector Window look?: Click on the icon in the upper left corner >> Inspect an element on the page.



For instance, if you attempt to identify the Add to Cart button, just drift around the button while accessing the Inspector Window, the specific snippets of the Add To Cart button will be highlighted. Then, you can see Add to Cart button’s ID/Class as circled in red as below screenshot. Next, it is recommended that you copy it to your clipboard for later use since the button’s ID and class are needed.



Step 2: Go to Boost Upsell app’s dashboard >> Product Recommendation >> Settings >> Product recommendation settings >> And edit the field “Where do you want to show recommendationS on your site?




Step 3: Add the CLASS/ID or HTML tag found in Step 1 to the editing box.


NOTE: 


Add “#” (hash) before the ID or “.” (dot) before the class before entering it in the box. For example:

  • .product-form-product-template
     or
  • #product-details


If the element has both ID and Class, please add #ID to the box. If the element has only ID or Class, please add #ID or .Class to the box


Eventually, kindly press Save button to finish the settings and refresh your product page to check the consequence.


If you need help with anything, feel free to contact support@boostflow.com. We are glad to assist!