By default, the integration supports the Dawn theme and replaces the search form with an Algolia template. Other themes might require a configuration change for the autocomplete to work. Go to Search Options > Autocomplete > Customize and change the setting for CSS Selector to the selector for the search field in your theme.
To display results, Algolia uses the element matching the selector form[action=/search]. If your theme doesn’t include this element, go to Search Options > Autocomplete > Customize > CSS Selector and change the CSS selector to match your theme.
If you enable Algolia for collection pages and your theme doesn’t include the default .content-for-layout class, update the CSS Selector in Collection pages > Display settings > CSS Selector.
See the Frontend (UI/UX) guide for more information on configuring your frontend to help support your theme.
Missing product images
Shopify 2.0 themes introduced base styling to hide empty elements. This can cause issues with hidden product images. Resolve the issue by adding display:block to the image selectors.
For autocomplete, in algolia_autocomplete.css.hogan.liquid snippet file, add display:block to the .aa-dropdown-menu .aa-product-picture selector as below:
For InstantSearch, in algolia_instant_search.css.hogan.liquid snippet file, add display:block to the .ais-page .ais-results-as-block .ais-hit--picture selector as below: