Enable Instant Search - Finding the CSS Selector - SOLVED


A simple question but once the algolia app is installed on a Shopify store and the “Use Instant Search Page” option is selected under configuration, should Instant Search be enabled and active on a store?

I checked the box to enable Instant Search but my old search page is still active. I see the algolia instant search files are installed but I cannot get the instant search feature to activate in order to tweak it.

I’m glad you found the answer to your question by yourself!

Just as a reminder for other people having the same issue.
We can’t simply detect where we should install ourselves in the search page.
This is why below the “Enable instant search” checkbox, you also have a “CSS selector” field.
We have a small documentation section about them.

This is not trivial to get, while any front-end developer would know what how to get it.
The idea is that with this selector, we’re able to know which part of the page you want us to replace with our search.

Let’s say I wanted to get the CSS selector to your message @originalfilmart .
In Firefox/Chrome I would first right click on it and click “Inspect Element”:

Then In would hover above the different lines in the Inspector view until I see a block which is the one I wanted:

Then, just right click on this specific line > Copy > CSS selector:

Then, just use this in the CSS selector box, save, and you should now have our instant search activated. :slight_smile:

Would you mind explaining what the output looks like that you’re copying? Do you have an example in a shopify store you might be able to share?

I’m currently using .shopify-section.search-template-section which seems to work on the first page of results, but when I click to the second page, the instant results page is gone and it shows the normal search results page. If i reload, it will pick the Algolia Instant Results page back up. Also, when clicking through search results to the product page, the main product image doesn’t appear.

Sure thing! On our demo store, https://algolia-demo.myshopify.com/search , the selector we’re using is simply #content .

It will often evolve around:

  • main
  • content
  • container
  • wrapper

About your missing product images, without more information, I will unfortunately not be able to help you. Would you have a link to your store that you could share here / a preview link to your theme?