How to set up redirects on my Shopify website?

If you are using our Instant Search library by setting up a custom IS implementation, the process of setting up redirects remains the same for Shopify users.

First, you create a rule that returns a redirect link when the query rule is triggered (in this case by a query containing the term "redirect"):

You can then add your custom redirect widget to your JS file:

instantsearch.widgets.queryRuleCustomData({
    container: '#redirect',
    templates: {
      default: '',
    },
    transformItems(items) {
      const match = items.find(data => Boolean(data.redirect));
      if (match && match.redirect) {
        window.location.href = match.redirect;
      }
      return [];
    },
  }),

Last, you load this widget in your HTML template:

 <div id="redirect"></div>

When we trigger the rule, the user will now be redirected to the link that we previously specified in our query rule.

Here is a working Codesandbox example: https://codesandbox.io/s/custom-redirect-3megs?file=/index.html:1204-1229


If you are using the standard Shopify plugin widgets, here are the detailed steps you should follow after creating the rule in the Algolia Dashboard:

1. Import the non-bundled queryRuleCustomData widget as detailed in this guide
2. Add the widget to the algolia_instant_search.js.liquid file

instantsearch.widgets.queryRuleCustomData({
    container: '#redirect',
    templates: {
      default: '',
    },
    transformItems(items) {
      const match = items.find(data => Boolean(data.redirect));
      if (match && match.redirect) {
        window.location.href = match.redirect;
      }
      return [];
    },
  }),

3. Add the corresponding div to the algolia_instant_search.hogan.liquid file:

<div id="redirect"></div>

Last reviewed 06-05-22.