A search selector will only be needed if the site search integration is not working when that setting is enabled.
What is a Search Selector?
A search selector is Grow's way of finding your site's search box.
Once the correct search selector is updated in the settings, if a user clicks into the search box, they'll be directed right to the Grow interface to search the site.
Do I need a Search Selector for Site Search Integration to work?
Not necessarily! We've set Grow up with a few common search selectors to start so there's a good chance it might work without needing to add one into the settings.
How To Find the Search Selector
Step 1: Go to one of your posts and inspect your site’s search element using your browser’s built-in HTML inspector tool. (We’ll use Chrome’s DevTools for this example.)
Step 2: Start by finding the search element (can be a search bar or search button) in your post’s HTML source code and notice any unique element classes or IDs that we can use as a selector.
You’ll want to choose the specific search element where you’d like to see the Grow Site Search Integration triggered as soon as your reader clicks on it.
Try to choose the core element itself and not any outlying containers, widgets, etc. that may hold the element, like below:
Example 1: Here is a search button element with a unique ID selector we can use:
Using the ID selector of #search-button will help trigger the Grow Site Search Integration as soon as the reader clicks on that button element.
Example 2: Here is a search bar element with a unique class we can use below:
Using the class selector of .searchform will help trigger the Grow Site Search Integration as the reader clicks on the search bar above.
Important Note: You want the selector to be unique to your search element to avoid any issues, as that will allow for more accurate targeting. We’ve seen that <form>, <button> and <input> elements work great here and usually have easy selectors you can work with.
If your Site Search Integration isn’t quite working and you suspect it's due to a selector issue, read more here on ways to work around that - such as adding in a custom class selector.