How to place the Shipping Rates Calculator widget differently on desktop and mobile?

We have released a new update for the app, and it is now possible to place the Shipping Rates Calculator Plus widget in a different location on desktop and mobile directly from the app preferences page.

To do so, a CSS selector will need to be used for each mobile and desktop. This can be done from the app preferences page in the Advanced preferences section through the Change widget location button:

Once you click on Change widget position, you will see the option to use a CSS selector and a text with blue letters which says Use a different selector for mobile devices. That is the option needed to place the widget in a different location on mobile:

Please 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 simple, robust, and unambiguous selector.

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

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