Personalized Recommendation widgets are placed in the footer of the page as default. In case you cannot find the Widgets showing on the storefront or want to change their position on your site, please follow these steps:
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
- This is the Inspector Window: Click on the icon in the upper left corner to inspect an element on the page.
- For example, if you want to detect the Add to Cart button, just hover over it while opening the Inspector Window, the specific snippets of the Add To Cart button will be highlighted. Here you can find Add to Cart button’s ID/Class as circled in red as below. Because we need the button’s ID and class, there you should copy it to your clipboard for later use.
Step 2: Go to Personalized Recommendation app’s dashboard >> Settings tab and edit the field “Where do you want to show recommendation on your site?”
Step 3: Adding the CLASS/ID or HTML tag found in Step 1 to the editing box.
- Add “#” (hash) before the ID or “.” (dot) before the class before entering it in the box. For example:
- 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
Finally, please hit Save to complete the settings and refresh your product page to check the result.
In some cases, the instruction might not work due to the specialty of your theme, feel free to contact firstname.lastname@example.org, we are happy to help!