How to place the app widget in a different location
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, we have some predefined locations for the supported themes, the most used in Shopify:
- Below the 'Add to cart' button.
- Below the product description (in the right column).
- Below the product description (taking the full width).
- At the bottom of the page
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 to 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:
- Click Save on the current page to confirm your selection.
- Click Select position to open your Shopify theme editor.
- Check the app presence on the product page.
- 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 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:
Once all the changes have been made, please remember to click on the Save button to save the new configuration.