How to place the app widget in a different position

The widget is placed automatically after installation in a safe position. 

The automatic placement algorithm supports all free themes and some paid themes and it is capable of selecting an adequate location to make the widget relevant to your visitors.

However, for unsupported themes, the widget is placed at the bottom of the page for safety and convenience reasons.

If you prefer, you can also go to the  Position section, on the app preferences, to move the widget to another place in the template:

There you can select if you wish to change the widget location on the product page or the cart page:

Product page

On the product page, we have some predefined locations for the supported themes, the most used in Shopify:

  • Below the 'Add to Cart' button
  • Below the description, in the right column
  • Below the product, taking the full width
  • At the bottom of the page
  • Custom position, with a selector

With these predefined positions, you can easily place the widget in the most suitable spots without editing any code. It's the ideal option for the most common Shopify themes.


Another simple way to add the widget on your store is by using the Shopify theme editor.

You can visually position your widget quickly, without needing any coding skills. All you need to do is:

  1. Click Save on the current page to confirm your selection.
  2. Click Select position to open your Shopify theme editor.
  3. Check the app presence on the product page.
  4. Click the Save button on your Shopify theme.

Here you can find more information on how to use the theme editor to display your apps:

https://help.shopify.com/en/manual/online-store/themes/customizing-themes/apps#app-blocks


But, if you prefer to place the widget in a fully custom location, or your theme is not supported, you can use the Custom position, with a selector option:

You just need to enter a CSS or jQuery selector pointing to the HTML element where you want the widget to appear. Then, you can choose its exact placement (before, after, as child, or first child of the selected element). This option provides maximum flexibility to fit any layout.

And it also includes an option to place the widget in a different position just for mobile devices:

Cart page

On the cart page, the supported themes offer two predefined positions: just below the “Checkout” button or above the cart content:

Both options allow you to integrate the widget naturally and effortlessly into the cart layout.


You can also use the theme editor to place the widget on the cart page just like the app's position is configured on the product page through the theme editor. It's a simple and intuitive process.

However, if you want to move the widget to another custom location, don't worry, the widget can be displayed easily in the required place using the button Custom location, with a selector:

You can set a jQuery or CSS selector for the HTML element in your template where you want to place the widget and type that selector in the main field.

Once an appropriate selector is assigned into the field, it is also possible to choose the placement of the widget related with the element selected.

It is also possible to choose a different location for the widget on desktop and mobile devices. Simply click on the option that says  Use a different position for mobile.

And of course, as always, if you need our assistance in relocating the widget, you can contact us and we would be more than glad to help.