You can change the Recommendation Box placement by going to the Designer inside your LimeSpot Admin Panel. Once inside, click on Conversion > Website Personalization > Designer. Note that when you are downloading LimeSpot for the first time, the Designer is shown as a preview only along with a tour guide.
Step 1: Navigate in the site preview to the page you would like to change the placement of the boxes.
Step 2: Click on the Page Setting (the changes will apply to all the recommendation boxes that is in that page) or the specific recommendation box that you would like to change the placement of.
Step 3: Click on Placement. You will see 4 fields: Placement Method, Placement Sibling, Placement Disposition and CSS Classes.
Step 4: Identify and define the Placement Sibling
Use the "find" icon beside the Placement Sibling field to point and select an element on the page. Then, click the ✔️ to confirm your selection. The Recommendation Box will be placed above the selected element by default, unless you choose Insert After or Replace (this method hides/replaces the entire section and adds our box instead) in the Placement Method field dropdown.
NOTE: If there are issues with using the selector method above, follow the Placement Tutorial Video to find the correct placement sibling. Please note that there has been interface updates so the Designer in the video may look a little different, but the concept is the same.
(Optional) Step 5: Define the Disposition
The placement disposition is the relative position of the recommendation box in relation to the placement sibling you identified.
(Optional) Step 6: Identify and Define CSS Classes
Sometimes, store content is not the full width of the screen (i.e. there is empty space on either side of your page content. If that is the case, the recommendation boxes may run the full width of the webpage and you may need to add a class to ensure the recommendation boxes are the correct width.
Add a class to our recommendation boxes to apply any page widths. The most common classes used are container, wrapper, page-width and row.
Tip: Go to this article to know more about HTML classes.