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. You can see how to access the section here.

There you’ll find two ways to change its placement:

  1. Predefined positions – for most supported Shopify themes.
  2. Manual options – for custom or unsupported themes:
    • Using the Shopify Theme Editor
    • Using a custom position with a selector

This is what it would look like:

Predefined positions let you move the widget to common spots in your theme — no coding required.

This is the easiest and most reliable method for most Shopify themes.

💡 Note: If your theme is heavily customized or not supported, predefined options may not work as expected. In that case, use one of the manual methods below.

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 THEME EDITOR option:

  1. In the app’s Position settings, click Select position.

    This action will open the Shopify Theme Editor.

  2. In the Theme Editor, hover over different sections of your page.

    You’ll see + icons appear above and below each section.



  3. Click the + icon where you’d like to place the widget.

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



  5. 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

CUSTOM POSITION WITH A SELECTOR option:

You just need to enter a CSS selector pointing to the HTML element where you want the widget to appear. Then, you can choose its exact placement:

  • 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.