How to place the app widget in a different location

When you install the app, the widget is automatically added to your store in a safe, visible position. Our placement algorithm works well with most free Shopify themes and some paid themes, automatically finding a location.

However, if your theme isn’t supported, the widget will appear at the bottom of the page by default. This ensures it displays safely without interfering with your layout.

If you’d like to move the widget, go to the Position section in the app’s preferences.

There you’ll find three ways to change its placement.

Predefined positions – for most popular Shopify themes

Predefined positions let you move the widget to common spots in your theme in just one click — no coding required:

This is the easiest and most reliable method for most Shopify themes. However, if the predefined options don’t fit your layout, you can manually place the widget using Shopify’s built-in Theme Editor or Custom position with a selector option.

Using the Theme Editor

In case you are not using one of the supported themes which can benefit from the predefined positions, you can easily decide the best spot from your widget using the Theme editor following these steps:

  1. In the Position section of the app click 'Using theme editor'

  1. Click Save at the top of the current page

  1. Once you save, you the button 'Select position' will be actionable - so click it and it will open the Shopify Theme Editor

  1. In the Theme Editor, hover over different sections of your page. You’ll see + icons appear above and below each section. Just click the + icon where you’d like to place the widget.

  1. In the pop-up window, select Apps → find the app’s name → click to add it.

  1. Verify the widget appears in the right spot, then click Save in the Theme Editor.

For more details on how to add app blocks, you can check Shopify’s official guide: Using App Blocks in the Theme Editor

Using a custom position wit a selector

Alternatively, you can just use a CSS selector pointing to the HTML element where you want the widget to appear. Then, you can choose its exact placement by selecting one of the following options:

  • Before the selected element
  • As the first child of the selected element
  • As the last child of the selected element
  • After the selected element.

This method offers more flexibility and works with any custom theme.

You can also define a different position for mobile devices to ensure optimal display on all screens.

Don’t Forget to Save!

After adjusting the position using any of the methods above, click Save to apply your new configuration.