Finding shop's search CSS element

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.

You can use our AI-assisted tool to find the CSS selector of your shop's search element of your shop. Follow these steps:

  1. Go to this page (opens new window).
  2. Enter your shop's URL and click Find Selector.
  3. Copy the CSS selector for your shop's search element and paste it into your integration.

Finding your search CSS element manually

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

note

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

  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