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.

Autocomplete widget CSS Selector

Autocompelete CSS Selector screenshot

Instant Search widget CSS Selector

Instant Search CSS Selector screenshot


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