Magento 2 Integration

I am new to Algolia and I followed the directions to install it with Magento 2. This all went without issues and the index was completed and all the products are on Algolia. The issue is that when I try to use my custom theme that the search box will disappear if I enter .algolia-search-input in the DOM setting, and if I leave the DOM setting empty then the system just uses the standard Magento 2 search.

The search bar will work if I use the default Magento 2 theme Luna. However, I cannot figure out what to enter to make it work with my custom theme. The custom theme shows it have the block but Algolia will not use it. If I enter the ID of the search box “input-text” then it also doesn’t display. So I am not sure what DOM I should be entering.

Can anyone help with this?

Hi rkoch,

Thanks for contacting the Algolia team.

I assume you’re already done with this guide:
You need to make sure every template from the extension is loaded inside the page including the selector, for example, “.algolia-search-input” .

Let me know how it goes and if you have more questions.
Best regards,

Yes, I did check that guide and those extensions all appear to load on the page. But the search box disappears. Any ideas why? How do I know if my page has a topSearch block?

Thanks for reaching out.
Would it be possible to share a URL for us to see the issue live ?

Thanks in advance.

yes. so the site that I have Algolia active on is Currently the setting for input DOM is set to this…

But when it is set to that, the search bar in the middle of the header completely disappears. You can compare the search bar to how it should look normally on

If I clear out the box for input DOM selector and leave it blank, the search bar shows, but it utilizes the native magento 2 search. Even though Algolia is set to be the search engine.

We don’t apply the same layout handle depending on if you use the default selector (.algolia-search-input) or not :

I guess your custom theme is not natively compatible with the layout algolia_search_handle_with_topsearch.

Could you check if the container “header-wrapper” is still available on your layout ?

Looks like the site uses a section called header-content and panel wrapper. Don’t see a header-wrapper.

So header-wrapper is disabled. This is what my theme shows. Any idea what I need to change?

I figured out how to get the search box to display. One question on the instant search page, it only covers about half the screen. What CSS setting do I need to change to make the results fill 100% of that area instead of about 50%?