Hello,
I just recently changed my Shopify Theme and am trying to connect the Algolia automplete module from the plugin. I Have an issue because I tried several CSS selectors to connect it, it won’t work (and more it generate kind of a mess in some section rendering, like the collection grid)
Can you help me to get the correct CSS selector ? I am not really familiair with this (i tried with the inspect mode, and the copy selector option from google chrome, but i don’t know which on i should use on all the div i tried)
the website in question is the following : www.mrmoutarde.com
thank you in advance ! 
Hello,
We have recently updated our Autocomplete library. When you ‘re-installed’ Algolia into your new theme you most likely have inherited the new updated Autocomplete as well. With the new Autocomplete we do not target the input itself but rather the form.
Normally we suggest using the CSS selector 'form[action="/search"]'. However, after examining your website you have multiple languages. We suggest using 'form[action*="/search"]'. Where the * catches all the languages such as en.
You also turned off a few things that will “break” your autocomplete. We turned off debug mode because autocomplete is on your live theme. We turned off “query suggestions” because you haven’t setup your query suggestion in the Algolia Dashboard yet.
We also notice that Shopify’s predictive search is giving some issues with autocomplete. There is a huge overlay that blocks the whole screen, rendering autocomplete useless.
There are a couple of steps you’ll need to do before enabling autocomplete.
- Turn off Shopify’s predictive search, it’ll be somewhere in your theme settings
- Update the CSS selector to be
form[action="/*/search"]
- Possibly raise the
--aa-base-z-index to be higher than 4. It looks like the header overlay could be overlapping autocomplete.
The end result we were able to successfully add autocomplete onto your store
