How to use the Dynamic Selector

You can follow the short tutorial here on how to place your widget:

When you create a Widget after finishing up the General Settings and customizing the text, design and progress bar what is left to do is to position the Widget by using one of the 2 options available under Position:

If you choose the Apply Global Positioning Settings for Widgets you will still have to go through the process described below for Custom Positioning, but from Settings -> Global Positioning Settings. The Selector will work the same but on a global level in the store.

Now to get to Custom Positioning at the individual widget creation level, you can first choose Below or Above from the drop-down menu, which means if you want to position it below or above an element we will choose when clicking on the Open Dynamic Selector.

The input element can also be manually added however, Please don't use this if you are not proficient in HTML and CSS. This section will be automatically populated by using the Open Dynamic Selector button to choose the element on the next page.

After you click on the Open Dynamic Selector, you will automatically get redirected to an example product page from your website in which the entire page is "animated", such as every time you hover an HTML element, it gets highlighted.

This way, you can select any element by clicking on it, and the border highlight will remain over the element you select and the class of the element is populated automatically in the top bar for this element. You will also see a small preview of where the widget will show when you choose a specific element.

After you select the desired element, you need to click Confirm Selection, which is the green button in the top Black header. You will get redirected back to the Widget editor with the class populated automatically, and you can Save it.

Now we can click the Widget title from the list of active widgets to see your new Widget live in your store like below:

We hope this article was helpful, and if you need any help setting your custom position please don't hesitate to contact support by either using the Chat toggle in the app in the bottom right corner or the e-mail support@appattic.com.