for

Frequently Asked Questions

Most common issues and how to fix them.


Where to ask for Help?

Please ask your question on our brand new Shopify forum https://discourse.algolia.com/c/shopify .

This way, anybody with the same question will be able to find the solution in the future and you'll get access to other great minds using our integration!

Questions & Answers

Will this plugin be compatible with my Shopify theme?

Our aim is to make our integration work with as much themes as possible.
However, we can't guarantee that this will be the case.

If you're having CSS issues with the autocomplete, please reach out to us on our forum so that we can try to improve the autocomplete to be fully theme-independent.

However, if you want to use as a replacement for your search page, there are too many factors that we won't be able to fully cover.
You should expect having some CSS to do in order to have it fully integrated in your theme.

To help you debug front-end issues in a theme that isn't your live one, we'll need to see this specific theme in action. We'll hence ask you to share with us a preview link to the theme you're installing us in.

Getting it is easy:

Facets list screenshot

Also, if your store isn't live yet, you might be using a password to block users. If you feel like this is sensitive, feel free to send it to us via email with a link to the associated question on our forum.

Do I have to use the bundled front-end?

No! The application is really split in two tasks: data indexing and front-end implementation. You can definitely only use the app to index data.

This can be useful in multiple cases:

  • You want to use those indices elsewhere than Shopify
  • The implementation you want to do is too far from ours to use it as a base

Can I customize the Autocomplete dropdown look & feel?

Yes. You can find some detailed explanations on this page.

My data is out of sync with Algolia

This is expected to happen from time to time. There are multiple points in the data duplication chain that could explain some records being out of sync.

In that case, head to the Settings tab of the application and click the Reindex button of the faulty data type. This will trigger a full reindex (which can take up to 24 hours), after which your data should be updated as expected.

If your data keeps getting out of sync, this might be a sign of an indexing error on our side. Please report it to us so that we can investigate what could be the cause.

More information in the Indexing introduction section of the documentation.

Can I use one Algolia account for multiple Shopify stores?

Definitely! You'll find at the bottom of the Credentials tab a field to change the index prefix used in Algolia.

Just set up each of your stores with a different prefix, and you're good to go!

I have a webhook warning, what does it mean?

To keep your data up to date between Shopify and Algolia, we're registering to webhooks provided by Shopify.

You should never have this warning, but it happens that we're not able to register correctly to those webhooks (e.g. a network error for instance).

In that case, you'll need to :

  1. Restore the webhooks by clicking the button in the warning
  2. Optionally reindex everything from the Settings tab

How to display as a list by default

If you want to change the default display to the list style by default, you only need to do small changes to snippets/algolia_instant_search.hogan.liquid:

@@ -24,15 +24,15 @@
     <div class="ais-search-header">
       <div class="ais-stats-container"></div>
       <div class="ais-change-display">
-        <span class="ais-change-display-block ais-change-display-selected"><i class="fa fa-th-large"></i></span>
-        <span class="ais-change-display-list"><i class="fa fa-th-list"></i></span>
+        <span class="ais-change-display-block"><i class="fa fa-th-large"></i></span>
+        <span class="ais-change-display-list ais-change-display-selected"><i class="fa fa-th-list"></i></span>
       </div>
       <div class="ais-sort">
         Sort by
         <span class="ais-sort-orders-container"></span>
       </div>
     </div>
-    <div class="ais-hits-container ais-results-as-block"></div>
+    <div class="ais-hits-container ais-results-as-list"></div>
   </div>
   <div class="ais-pagination-container"></div>
 </div>

How to use the instant search on other pages

A front-end developer is required for this step.

You'll first obviously want to disable the autocomplete in the Store Configuration tab.
Then the most important thing here is to have a CSS selector which matches on every page one single element.

For the rest, a diff is sometimes better than a long speech.
In assets/algolia_instant_search.js.liquid:

@@ -1,5 +1,6 @@
 (function (algolia, instantsearch) {
-  if (!algolia.full_results || !algolia.config.instant_search_enabled) return;
+  var everywhere = true;
+  if (!algolia.config.instant_search_enabled || !(algolia.full_results || everywhere)) return;

   var _ = algolia._,
       $ = algolia.jQuery;
@@ -21,7 +22,21 @@
       appId: algolia.config.app_id,
       apiKey: algolia.config.search_api_key,
       indexName: '' + algolia.config.index_prefix + 'products',
-      urlSync: {}
+      urlSync: {},
+      searchFunction: function (helper) {
+        if (!everywhere) {
+          helper.search();
+          return;
+        }
+        if (helper.state.query) {
+          helper.search();
+          instant.$results.show();
+          instant.$otherContent.hide();
+          return;
+        }
+        instant.$results.hide();
+        instant.$otherContent.show();
+      }
     }),
     selector: algolia.config.results_selector + ', .algolia-shopify-instantsearch',
     sortOrders: algolia.sortOrders,
@@ -68,6 +83,11 @@

   $(document).ready(function () {
     instant.$results = $(instant.selector);
+    if (everywhere) {
+      instant.$otherContent = instant.$results;
+      instant.$results = instant.$results.clone()
+      instant.$results.insertBefore(instant.$otherContent);
+    }

     instant.$results.html(algolia.render(instant.templates.page, {
       facets: instant.facets.list,
@@ -110,13 +130,19 @@
     });

     // Search input
-    instant.search.addWidget(
-      instantsearch.widgets.searchBox({
-        container: '.ais-search-box-container',
-        placeholder: 'Search for products',
-        poweredBy: false
-      })
-    );
+    var searchSelector = '.ais-search-box-container';
+    if (everywhere) {
+      searchSelector += ', form[action="/search"] input[type=text], form[action="/search"] input[type=search]'; // You can put the same CSS selector than for your autocomplete here
+    }
+    $(searchSelector).each(function () {
+      instant.search.addWidget(
+        instantsearch.widgets.searchBox({
+          container: $(this)[0],
+          placeholder: 'Search for products',
+          poweredBy: false
+        })
+      );
+    });

     // Logo & clear
     instant.search.addWidget({

Those changes are definitely not guaranteed to work on your website, but should give you a good starting point.