How to place the Frequently Bought Together widget differently on desktop and mobile?
⚠️ This guide is intended for users with advanced knowledge of CSS and selectors.
Should you require assistance with positioning the widget, we kindly recommend that you contact our customer support team via chat or email. They will promptly assist you in placing the widget exactly as desired.
The Frequently Bought Together widget can be placed in a different position 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 Position section.
Once you click on 'Custom position, with a selector button', you will see at the bottom in blue, 'Use a different position for mobile'.
These options will help you to position the widget. The idea is to 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 in each box.
🛠️ Using developers tools
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.
🔍Tip: 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, copy that selector.
- Paste it over 'Mobile widget position selector' on the app preferences page.
- Finally, remember to save the changes.
As mentioned before, it is always recommended to use a selector that is simple and robust, so a minor change in the HTML structure does not break it.