How do I find my shop's search CSS selector?

Finding where your search element lives in your shop's CSS is one of the mandatory steps to have Motive Commerce Search up and running. 

A CSS selector is used to identify an element of your shop's HTML code, in this case, the search box. By understanding where the search box is, Motive Commerce Search is able to show Motive's search bar when a user interact with the search element.

This page will give you some clues to find it, and if you can't, we'll always be glad to help at [e-mail].

The example used takes the names from Google Chrome's UI, but the naming on other browsers are alike. The overall process to complete the task is as follows:

1. Access your shop.
2. Right-click and click Inspect.
3. Click the element selector at the top-left corner of the HTML window.
4. Place your mouse or hover over the search element (in this case, the search box).
5. Right-click the highlighted bit on the right of the screen.
6. Right-click the highlighted code in the HTML and click Copy > Copy Selector.

Then, you'll have the resulting selector in its directory, in this example: 

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

1. Finally, paste the selector into the Search page.
2. Click Save.

How you inspect your shop may differ depending on which browser you're using. Here are some tips to easily view your shop's HTML:

• Google Chrome: Right-click the page and click Inspect.
• Safari: Access Safari -> Preferences > Advanced and select the Show Develop menu bar checkbox. Then, right-click the page and click Inspect element.
• Mozilla Firefox: Right-click the page and click Inspect Element.
• Microsoft Edge: Enter about: flags in the address bar and a dialog box is shown. There, select the Show View Source and Inspect Element in the context menu checkbox.

Once you are using the Inspect tool from your browser, hover over the search element of your shop and click so the matching bit on the right side of the screen will highlight. As explained above, right-click that bit and choose the 'copy selector' option. Bear in mind that more than one selector can exist for different devices, and they should all be included in the Search configuration page, separated by commas.

If this information has not been clear enough, do not worry! We will be delighted to help you at [e-mail].