As a default setting the widget will always appear in the footer of your page. If you wish to re-position your widget do the following:
To change the position of your Intelligent Product Recommender you’ll either have to add the CSS Class or the CSS ID of the new position.
1.) Use browser inspector to find The ID or Class Name of an element
Please, open your store’s homepage, product page or cart page.
To make the browser inspector appear in Google Chrome push F12 on your keyboard. Then click on the Icon on the left to inspect an element of the page:
2.) Search for an appropriate position for your recommendation and detect the CSS Class or ID of the chosen element.
3.) In this example, let’s detect the image next to the CTA:
Hover to the image while opening the Inspector Window (F12), the specific snippets of the image button will be highlighted. Click on the element and find the chosen element’s ID/Class as circled red below. Remember to copy it.
4.) Click on Edit on each of the widgets you wish to activate on your site:
5.) Look for Where do you want to show the recommendations on your site?
6.) Enter the Class/ID of the element you copied earlier.
- 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
7.) Finally, please hit Save on the admin of the application to complete the setting and refresh your product page to check the result.