Algolia provides easy integration with a range of leading ecommerce providers. In this article, we take a detailed look at integrating Algolia AI Search on BigCommerce – one of the most popular online retail platforms.

Having worked with thousands of online retailers and developers over the years, we’ve learned a lot about search. With that knowledge, we’ve created intuitive solutions that help teams quickly integrate our powerful AI search tools.

Our ready-to-use connectors let developers easily implement common data synchronization and frontend integration patterns, strategies, and techniques. Not only do these connectors allow you to seamlessly integrate search and discover features, but upgrading to newer, faster, and more powerful search solutions is simple as well.

Typically, your ecommerce platform’s prepackaged search solution generates both slower and lackluster search results compared to the Algolia Search API. Increased load times and irrelevant results can lead to an underwhelming customer experience.

A comparison of Algolia’s search with Autocomplete and BigCommerce’s out-of-the box search

Our BigCommerce connector can help you improve your ecommerce search functionality and takes less than 15 minutes to set up.

Getting set up

1. Navigate into your BigCommerce admin shop.

2. Go to the BigCommerce marketplace.

3. Search for Algolia.

4. Select the Algolia App.

5. Click on ‘Get this App.’

6. Login.

7. Click on ‘Install.’

8. Agree to permissions.

9. If you’re already logged in, it should automatically authenticate you. If you don’t have an account yet, a popup will walk you through the sign-up process.

Configuring Algolia data synchronization and frontend integration on BigCommerce

In the ‘Configure your Algolia application’ dialogue box:

1. Give a name to the index Algolia will be using.

2. Choose your ‘Record Type’ – ‘Product level’ or ‘Variant level’ indexing.

Product level indexing groups products into classes of items, indexing and displaying them accordingly. Variant level indexing configures and displays every single variant of an item within its own product index.

3. Select the currency your store will be working with.

4. Slide to set the ‘Success Threshold’ value.

This feature tells Algolia, every time it creates a new index or does a full re-index, what percentage of records must be indexed and updated. If a user sets the threshold at 80% but only 50% of the records end up being successfully indexed, Algolia will generate an error message. Errors are usually an indication that product descriptions are too large. You will need to fix the records so that they can be indexed correctly.

5. Click on ‘Save.’

6. On the Index Products click on, ‘Yes, index now.’

Indexing will start immediately and continue behind the scenes. A new page will appear showing the datasource and index details. The accompanying box shows a ‘Reindexes’ link.

7. To monitor indexing click on the ‘Reindexes’ link.

8. The page lists the ‘Reindex Runs’ and their indexing status.

Once the indexing is complete you will be able to test the search experience.

Setting up Autocomplete

Autocomplete assists users by providing them an entry point into Algolia’s search experience. Through Algolia’s search bar, users can see results as they type.

1. Click on ‘Sources’ at the top of the page and then Search Settings.

On the Search Settings page there are two sections – Autocomplete and Instant Search

2. Start with the Autocomplete dialogue box at the top of the page.

3. Most of the settings will be pre-filled based on the standard layout of your BigCommerce web page template.

Other features, like Desktop CSS Selector, let you choose where to place the Algolia search bar on your storefront BigCommerce.

4. Set merchandising features to configure:

a) The number of products to show in the search results.

b) Whether to display out of stock products.

c) Whether to display other products when a product is unavailable.

The power and behavior of Algolia AI Search can be further enhanced using the ‘Edit CSS’ and ‘Edit Javascript’ features in the Autocomplete dialogue box. When updates affect either of these two variables, you will be able to review how the changes will impact the look and functionality of the customer facing front end before applying them to your ecommerce site.

5. Click on ‘Save.’

6. Move toggle at top right-hand corner to ‘Enable.’

7. Confirm selection in the pop-up dialogue box.

This will apply the Autocomplete settings to all of the themes across the channel storefront.

Configuring InstantSearch

InstantSearch lets you build a search results interface for the BigCommerce front end that can also be used to power product listing pages.

1. Scroll down to the InstantSearch configuration settings on the bottom-half of the Search Settings page.

2. Most of settings, like ‘Identifying page display’ and ‘Source locations,’ will be pre-filled based on the standard layout of your BigCommerce web page template.

3. Set merchandising option:

a) Choose ‘number of products shown.’

b) Set ‘the facet option limit.’

Note: The power and behavior of Algolia AI Search can be further enhanced using the Edit CSS and Edit Javascript features in the InstantSearch dialogue box.

4. Click on ‘Save.’

5. Move toggle at top right-hand corner to ‘Enable.’

6. Confirm selection in the pop-up dialogue box.

This will apply InstantSearch settings to all of the themes across the channel storefront.

Setting up Algolia Insights

Once Algolia is up and running, you can implement Algolia Insights to start collecting event data like views, clicks and purchases. This lets businesses fine-tune the search experience for their customers and unlock features like Algolia Recommend.

1. Click on the Insights tab on the Sources page. ‘Click Analytics’ will be on, by default.

2. In the ‘UserToken Settings’ choose the second option, ‘UserToken is set using cookies depending on the user’s approval.’

This will allow you to power the personalization features. It relies on the BigCommerce cookie consent tracking that the customer accepted when they first arrive on the ecommerce site.

3. Click on the hyperlink ‘BigCommerce’s Cookie consent tracking.’

4. This opens a new page. Scroll down and click on ‘Security and Privacy’ settings.

5. On the ‘Security and Privacy’ settings scroll down to ‘Your customers’ privacy settings.

6) Confirm that ‘Cookie consent tracking’ is on.

This ensures that when a user consents to tracking, Algolia is able to collect the user information to harvest analytics.

7. Click on ‘Save’ at the bottom of the page.

You can also choose to start collecting additional conversion analytics.

8. Make sure the ‘Use data layer analytics’ box is checked.

9. Under Storefront Events, select ‘Add to cart’ and ‘Order Purchased’ to add those customer actions to your pool of harvested user data.

10. Click on ‘Save.’

That’s it! Your analytics are now set up.

We recommend that users configure these features as early as possible so that you’re collecting customer data from day one.

Setting up Algolia Recommend

Algolia Recommend allows developers and businesses to display recommendations that encourage users to expand their search and browse through a wider array of products and services. Algolia Recommend is a powerful merchandising tool that enriches the customer’s ecommerce journey and provides a data-driven cross-selling experience.

1. Select the Recommend tab at the top of the page.

2. On the Recommend dialogue box, click on the Algolia Recommend hotlink.

This will open a new page where you can choose the type of Algolia Recommend model you want to use. It is important to make sure to train the model first.

3. Choose the model you would like to use by clicking on the button below each image.

4. A new page will open with details on the model and the training information to use.

Rather than wait for enough events to accumulate organically, you can import an index to get up and running quickly.

5. Choose the data source (index) and then upload a CSV file containing past events to be used to train the model.

6. In the pop-up dialogue box click on ‘Import.’

7. Click on ‘Start training’ at the bottom of the page.

8. Once the model has finished training, a new page will open with an image of the Recommend function and a code box.

9. Navigate back to the BigCommerce Admin page.

10) Confirm the name of the index being used to power the Recommend function. Click on ‘Save & Apply.’

11) Click on the ‘theme editor’ link to add the Recommend carousel to your BigCommerce web page.

12. On the ‘theme builder’ page find the Algolia Recommend widget and then drag and drop it to the desired location on your BigCommerce template.

13. Click on ‘Publish’ at the top right-hand corner of the page.

Confirm indexing

1. Close the Theme Builder. Navigate back to the BigCommerce admin page.

2. Click on ‘Sources.’

3. Click on ‘Reindexes.’

4. Verify status of the Reindex Run.

After it finishes, you are good to go!

Algolia’s ready-to-use connectors make integrating AI search with BigCommerce easy. It enables businesses to harness the power of Algolia’s world’s leading search and discovery AI technology and merchandising tools.

For more information about integrating Algolia into our BigCommerce storefront, watch the video from our DevBit webinar, Practical tips for building AI Search on ecommerce platforms like Shopify and Bigcommerce.