Where can I find the CSS selector for my shop's search element?

CSS selectors are used to identify individual elements of your shop's HTML code such as the search element. Motive Commerce Search needs to know the location of the search element for the Motive search bar to identify any user interaction with it.

Example

To find the CSS selector for your shop's search element, you have to inspect your site's HTML. In this example you can see how to do it.

Note: This example is intended for Google Chrome, but elements in other web browsers are named similarly.

To get the required CSS selector, do the following:

1. Access your site.
2. Right-click anywhere and click Inspect.
3. At the top-left corner of the HTML window, click the element selector.
4. Hover your mouse over your site's search box or the corresponding search element.
5. Right-click the highlighted bit to the right of the screen.
6. Right-click the highlighted code in the HTML window and click Copy > Copy Selector.

You get the selector in its directory, in this example: 

#search_widget > form > input.ui-autocomplete-input

Inspecting your shop's HTML in other browsers

Here are some tips to easily view your shop's HTML in other web browsers:

• Safari: In the top menu of your Apple device, access Safari > Preferences > Advanced and check the Show Develop menu in menu bar checkbox. Then, go to your site, right-click and click Inspect element.
• Mozilla Firefox: Right-click your site and click Inspect Element.
• Microsoft Edge:Right-click your site and click Inspect.

Once you access your site's HTML, hover your mouse over your shop's search element and click so that the matching bit on the right of the screen is highlighted. Then, right-click that highlighted bit and select the copy selector option.

Note: If more than one selector is available, include them all separated by commas when configuring the search layer.

If this information isn't helpful enough, don't worry! We'll be delighted to assist you at [e-mail].