How to place the Also Bought widget differently on desktop and mobile?

The Also Bought app allows to place the app widget in a different location on desktop and mobile.

To do so, a CSS selector is needed, for each, mobile and desktop. This can be done from the app preferences page, selecting the Widget location option and choosing the page in which you want to position the widget:

Please note that you can modify the location of the widget whether it is on the product pages or on the cart page. For both pages, the app widget can be placed differently on desktop and mobile.

Once you click on Product page location or Shopping cart location, you will see some pre-defined selectors and a Custom location option, chosing this option will display a section like the one in the following image. There you can see the option Widget location selector and highlighted in blue it says Use a different location for mobile. That is the option needed to place the widget in a different location on mobile:

Please also note that from the CSS selector field it is also possible to choose the placement of the widget such as after or before the selected element and as the last child or first child of the selected element:

Those options will help you to properly position the widget. The idea is to always choose a selector which is simple, robust and unambiguous.

If you are comfortable with HTML, you can set a jQuery or CSS selector for the HTML element in your template where you want to put the widget and type that selector accordingly in each box.

On the other hand, you can also take advantage of the web developer tools built into your browser to look for the desired selector. 

Ctrl+Shift+I on Windows and CMD+Option+i on Mac will open the DevTools on Google Chrome. Once there you can use the selection tool to find the HTML element that corresponds to the section under the cursor.

For example, when the selection tool is enabled (in blue) you can move the cursor over the page content and the browser will highlight the section pointed by the cursor while at the same time, the HTML inspector will highlight the corresponding HTML element.

Once you have found the selector you want to use, you can copy the selector:

And paste it in the selector box from the page mentioned before:

As mentioned before it is always recommended to use a selector which is simple and robust to avoid a minor change in the HTML structure possibly breaking it.

Lastly, please note that we can also help you change the location of the widget differently on desktop and mobile, simply drop us an email and we will help you as soon as possible.