Front-End Choices

When implementing Algolia on your store front, you have to decide between two main approaches:

1. You can use the widgets provided by our Shopify plugin.
2. You can handle the implementation yourself, using Algolia’s InstantSearch libraries.

Depending on your needs, one method will likely prove more convenient than the other.

Here is what you should know to make the right choice.

Using Widgets provided by Algolia for Shopify

Algolia for Shopify comes with one-click install widgets:

• Autocomplete widget: an Algolia realtime search bar and menu which replaces Shopify’s default search bar.
• InstantSearch Page: an Algolia powered search results page, which comes preconfigured with features such as filtering and sorting.

You can enable the Autocomplete widget and the InstantSearch widget from the Search options tab.

You can configure both widgets from the Shopify app.

The widgets that the Shopify app provides use InstantSearch.js v4.

Updating widgets

Widgets are updated to introduce new features or to squash bugs. However, these updates are never pushed automatically to any of the themes on a Shopify store. This way, you can be sure that any of your custom code doesn’t get overwritten without you knowing.

Algolia for Shopify notifies you of any updates in-app notifications or banners.

To update the widgets to the latest version, go to the Search options tab and re-enable the widgets on a particular theme.

Re-enabling widgets in the theme removes all customizations you’ve done. If you’ve customized the widget code, duplicate the theme first to avoid losing your changes.

Using InstantSearch libraries

To set up a custom Algolia InstantSearch on your Shopify site, you need to know how to code. A personalized implementation can yield a more customized search UI, but will take more time.