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

The Frequently Bought Together widget can be placed in a different location on desktop and mobile devices.

To do so, a CSS selector is needed, for each, mobile and desktop. This can be done from the app preferences in the Location section:

Once you click on Custom location, with a selector button, you will see the section of Widget location selector to Use a CSS selector and at the bottom in blue saying Use a different location for mobile devices. That is the option needed to place the widget in a different location on mobile devices:

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:

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

If you are comfortable using HTML, you can set a jQuery selector for the HTML element in your template where you want to put the widget and type which 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 which 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 that selector:

And paste it in the selector box from the app preferences page:

As mentioned before, it is always recommended to use a selector that 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.