Go to Conversion > Website Personalization and click Designer.

Navigate in the site preview to the page you would like to change the placement of the boxes. 

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.

Click on Placement. You will see 4 fields: Method, Sibling, Disposition and Add Extra CSS Classes.
​

Identify and define the Placement Sibling
Use the "find" icon beside the 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.
​

Define the Disposition (Optional)
The placement disposition is the relative position of the recommendation box in relation to the placement sibling you identified.

Identify and Define CSS Classes (Optional)
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.