CSS selector

Configuring your CSS selectors in the application

A CSS selector is a way to target a specific element on your page. We use them for two purposes:

  • Knowing to which inputs on the page you want to bind the autocomplete
  • Knowing which block on the /search page you want to replace

Knowing which CSS selector to use is actually not such an easy task.
I've tried explaining a bit how this works in this forum thread. If you're having an issue, you should ask your front-end developer to set this up for you.


There's another way to add the feature to an element in your page:

  • For the autocomplete, add the algolia-shopify-autocomplete class to the HTML input you want the autocomplete on
  • For the instantsearch block, add the algolia-shopify-instantsearch class to the HTML block you want to replace