We will cover what the dynamic placement selector is for the widgets Placement Settings.

The placement selector is looking for an HTML attribute to target in order to know where to display the widget content.

The most common HTML attribute that is used for this would be an "id" or a "class". Typically there will only be one "id" used within the HTML elements but often times a class will be used in many different locations within the HTML of the page. Keep this in mind as we search for a good attribute to attach to.

You can open up the developer tools that come with Google Chrome by right clicking anywhere on the screen and then clicking "Inspect". At the top menu of the developer tools is an option for "Elements". This is the tab that we are going to want to use for this.

At the very top left there is an icon that looks like a mouse over a square and when you hover over it a comment box appears, stating, "Select and element in this page to inspect it". This is a great tool to use! When you click that and then mouse over your page you will see many different containers in which the contents of your store is broken up as. When you have found a good container that you would like to have the widget placed above or below, click it!

This will show you the container element within the elements portion of the developer tools. You can see the elements that live inside of this and the elements that surround this.

Now, we are looking for a good id or class to target. In the element itself, you can see that there are possibly many attributes. Lets not get overwhelmed with what those are. But, instead, we will focus only on the "class" attribute or the "id" attribute.

After you have found a class name or id you can press Ctrl/Cmd + f in order to do a search through the elements. Type or paste in the name that you have found in order to see if there are multiple elements that have this class name or id using it. Often times you will see many class names being populated in the search but they may not be used on elements. By pressing enter you can go through all of the times that name is found in the mark up to determine if other elements are using that class name. If this more that one time that the class name is used on an element then this is not a good class name to use. We need to find an element that has a specific class name that is only used on that one element.

Now that we have found our specific class name or id we can go back to the widget editor screen. If this is a class then we will prefix the name with a "." (period). So targeting a class can look like ".social-sharing". If this is an id then we will prefix this with a "#" (hash). So, if could be something like "#socialSharing".

Sometimes using a little trial and error works best for finding the right element to attach to. You may have found a class that seems like the right spot and the widget is placed close to how you want it but it is a bit off. You can try using the "Append" Placement Location instead of "After" which may fix this. As well as the "Prepend" Placement Location instead of "Before".

If you've placed your widget div manually and still don't see the widget, please check that Rebuy is loading as expected: