InstantSearch

Configure Algolia InstantSearch for BigCommerce.

The Algolia integration for BigCommerce replaces the built-in BigCommerce search results page with InstantSearch.js.

Configuration

To configure the InstantSearch page, select a channel in your BigCommerce app and open the Search settings tab.

The Search Form CSS Selector option targets the main element of your search results page.

The Search Form Attribute option stores the HTML attribute that contains the route to the search results page. The default value is data-url.

Customize facets

The InstantSearch page uses the default_price attribute as default facet.

To add a new facet, click Add facet and enter the name of the facet, the attribute to use, and the widget to use to display the facet. Then, click Confirm facet.

Configure attributes for faceting. Make the facet searchable to let users enter a value to filter results for that facet. For example: color or size.

Facets can be displayed in these ways:

• Conjunctive List. Users select multiple options. All selected criteria must match for items to appear.

• Disjunctive List. Users choose any combination of options. Items matching any selected criteria show.

• Input Range. Users specify a numeric range. For example, price or date, and items within that range display.

• Slider. Users adjust a value along a scale. For example, updating the price or rating.

To reorder the facets, drag them around in the list. To remove a facet, click Remove.

To limit the number of facet options in InstantSearch, change the Facet Option Limit setting.

After making changes to the facets, click Save.

Customize sort order

The default sort ordering option is Relevance.

To add sorting options, first add replica indices.

After adding replica indices (one for each different sort order), update your InstantSearch configuration:

1. Click the Plus icon next to Add Sort.
2. Enter the title you would like displayed for the sort order.
3. Select your replica index.

After making changes to the sort order, click Save.

InstantSearch categories

InstantSearch categories let you display different configurations for different categories in your shop.

To enable InstantSearch categories, you need:

• InstantSearch configured, saved, and enabled for your shop
• At least one category in your shop
• At least one category with products in it.

To enable InstantSearch categories, click the toggle next to InstantSearch Categories.

You can also turn individual InstantSearch categories on or off.

Any duplicate category names are marked with an icon (“Towels” in the screenshot).

When you update, delete, or create a category, you must click:

• Refresh to update the category data from BigCommerce
• Save to send the changes to the Algolia for BigCommerce integration.

Categories placement region lets you specify where on the category page the InstantSearch categories widget should be displayed. The default is category_below_header.

Categories CSS selector targets the main element of your category page.

Customize InstantSearch categories facets

InstantSearch categories facets lets you display different facets for different categories in your shop. If you don’t select a facet for a category, the default InstantSearch facets are used.

To add, remove, or reorder InstantSearch categories facets, click Edit next to the appropriate category.

Click Save to apply the facets to the category.

Facet data, including their ordering, is then sent to BigCommerce metafields (and pulled from there when the category page is loaded).

Limitations of InstantSearch categories

When turning InstantSearch categories on or off, it can take 30 or more seconds for the changes to be applied to your shop (due to BigCommerce API rate limitations).

Customize the InstantSearch menu

InstantSearch is pre-configured for the Cornerstone theme in BigCommerce. For other themes, you might need to adjust the InstantSearch menu to match. You can edit both the CSS and JavaScript for InstantSearch.

To configure the InstantSearch CSS and JavaScript, open the Search settings tab and select Edit CSS or Edit JavaScript.

Use the editor to edit InstantSearch’s CSS or JavaScript.

When you’re done, save your changes in the editor. Then, click Save on the search settings page for InstantSearch to publish your changes.

Restore default CSS and JavaScript

1. Open the Search settings tab and select Edit CSS or Edit JavaScript.
2. Click Reset to default at the bottom of the editor.
3. Confirm that you want to reset the CSS or JavaScript code to its default. This action overwrites any changes you’ve made.
4. Save your changes in the editor, then click Save on the main search settings page for InstantSearch to publish your changes.

Update InstantSearch CSS and JavaScript

If there’s an update for the InstantSearch CSS and JavaScript code available, the Search settings tab shows Updates available badges. To update, click Edit CSS or Edit JavaScript.

The editor shows the differences between your existing code and the updated version. Make any changes, click Apply Changes, then save your changes.