Search Input in Sticky Header - Shopify Plugin

Hi All, hope everyone is doing well today. :slight_smile:

I am trying to add instantsearch functionality to an input in a sticky header on a Shopify site, the installation works fine on the normal header.

I’ve checked and the CSS selector is correct and identical on both inputs, tried the solution in a thread on this forum for two different inputs but the shopify installation seems to work differently.

I’m wondering if the results are not showing because the search input is hidden by on page load?

Is there a way to re-init the instant search after page load?

commenting out this code doesn’t seem to break the existing autocomplete so I am wondering what is different about the shopify plugin’s installation?

instant.search.addWidget(
      instantsearch.widgets.searchBox({
        container: '.ais-search-box-container',
        placeholder: algolia.translations.searchForProduct,
        poweredBy: false
      })
    );

Both inputs are identical, the code below:

<form action="/search" class="search_form aa-input" autocomplete="off" spellcheck="false" dir="auto">
  <input class="ais-search-box--input aa-input" type="text" name="q" placeholder="Search" value="" 
  autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" dir="auto">
</form>

CSS Selector in the app matches the inputs:
09

Hi @julian,

Thanks for reaching out!

The excerpt of code that you provided is from the InstantSearch Widget and not from the Autocomplete Widget,
are we talking about the Autocomplete or the InstantSearch?

Anyway, please know that having the input hidden does not prevent the Autocomplete to initialize.
So, you don’t need to re-init the Autocomplete.

In order to find the root issue of the Autocomplete not showing up, could you please send us an email on the Support with your shop URL and your Algolia Application ID?
We will be then able to figure out what is the issue.

Regards,

Hi @charly.poly , Thanks for your quick reply. I’ll drop a quick email to support with the client’s details. :slight_smile:

hi,

I have a similar issue. I have a sticky menu on my shopify website. When I’m scrolling the “algolia-autocomplete” is moving. I want to fixed it to the top menu but I’m kind of stuck.

Maybe your problem could help me.

Regards

Hey @cghisi, We ended up moving the input as opposed to initialising a second instance.

Are you talking about the list of items that appears or the input itself? Maybe @charly.poly can help if you can give more specific info on your problem?

Which part of the algolia autocomplete is moving/do you want stuck to the top menu?

How did you install it?

Have you contacted support?

Thanks for your answer. I was thinking that we had the same problem, sorry.
My problem is about the results box that appears when i’m searching something. The box is moving when i’m scrolling down the page. I would like to stuck the result box to the top menu.

I looked the CSS about the “position” tag but I think there is something else.

It was already installed. I was looking on google and found this post but I didn’t contact support yet.

Hmm, depending on what your menu positioning is, this could work if you add it to your CSS file.

.algolia-autocomplete {
    position: fixed !important;
    top:0 !important; /* Add the height of your top menu where the 0 is */   
}

I’m pretty sure there is a best practice way to do this in the docs: https://community.algolia.com/shopify/customization-introduction.html

I would also highly recommend contacting support as they could spot potential pitfalls before they happen. :slight_smile:

Thanks Julian,

I was thinking about the same thing. But you the top tag seems pretty important too. But I think something is wrong in my template. I will look at the different modifications.

Regards