How to obtain an element selector

Selectors are patterns used to identify elements in CSS that are used by our app in order to determine the position in which it has to display the corresponding video.

In order to obtain the proper selector, you can make use of your browser developer tools to extract an element's selector.

Google Chrome

1 - In order to be able to select one element in Google Chrome, you have to first open your developer tools. This can be achieved by pressing the keys combination Ctrl + Shift + I or by opening the menu seen on the following screenshot:

Once this menu is open, you should see something like this:

2 - The next step is to find the correct element, by either pointing at it on the page view (you can enable this by clicking the icon on the upper left corner of the developer tools window or by pressing Ctrl + Shift + C) or by finding it on the html code of the page. Once you have done so, the element will appear highlighted on the html code by right clicking it you should be able to choose an option named "Copy selector":

Doing so will give you a selector like this: #shopify-section-hero > div > div.hero__inner

3 - After obtaining this identifier, you only have to introduce it on the Widget location selector field to make the widget appear on the desired position:

Firefox

In order to obtain the element's selector from the Firefox browser, you should be able to follow the same steps as with Google Chrome:

1 - Open the developer tools by using the Ctrl + Shift + I shortcut:

2 - Find the desired element by selecting it on the page view (Ctrl + Shift + C to enable the selection mode) or by finding it on the html code of the page:

3 - Right click the html element and select Copy > CSS selector:

You will obtain a selector like this: .hero__inner

4 - After obtaining this identifier, you only have to introduce it on the Widget location selector field to make the widget appear on the desired position:

Safari

1 - Open the field inspector (developer tools):

2 - Select the desired element by using the element selector or by finding the desired element on the html code of the inspector:

3 - Once you found the desired element, you can obtain the CSS selector by right clicking the html element and selecting Copy > Selector Path:

You will obtain a CSS selector like this one: #shopify-section-hero > div > div.hero__inner

4 - After obtaining this identifier, you only have to introduce it on the Widget location selector field to make the widget appear on the desired position: