Finding shop's search CSS element manually

CSS selectors are used to identify individual elements of your shop's HTML code, such as the search element. Motive Commerce Search lets you locate it visually in the Search Layer section of the Playboard. If that fails, you may need to find it manually. Follow these steps to learn how to locate the CSS of your shop’s search.

Finding the CSS selector for your shop's search element

To find the CSS selector for your shop's search element, you need to inspect your site's HTML. This example demonstrates how to do it.

note

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

Finding your search CSS element:

To find the CSS element, follow these steps:

  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.

CSS selector

In this example, the selector is:

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

Inspecting your shop's HTML code in other browsers

Here are some tips for viewing your shop's HTML code in other web browsers:

  • Safari: In the top menu of your Apple device, go to Safari > Preferences > Advanced and make sure the Show Develop menu in menu bar checkbox is selected. 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 code, hover your mouse over your shop's search element and click it to highlight the matching bit on the right of the screen. 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 you're still struggling with this step, don't worry! We'll be delighted to assist you at support@motive.co.

Cookie-Less