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, go to Search experience in the app and select the storefront channel you want to configure.

In the InstantSearch section, use the toggle to turn InstantSearch on or off for the channel. Turning it on creates the search results page and applies the default setup to the channel’s live themes.

Advanced settings contains these options:

• Results per page and Filter values shown control how many products and filter values are displayed.
• Search form CSS selector targets your theme’s search form so it routes to the results page.
• Search form attribute stores the HTML attribute that contains the route to the search results page. The default value is data-url.
• Show out-of-stock products includes products with no inventory in results.
• Distinct results collapses variants of the same product into one result.

The search results page URL must be a top-level path, such as /search-results. InstantSearch doesn’t load on nested paths, such as /shop/search-results.

When you change any of these settings, a bar with unsaved changes appears. Select Save changes to apply them to your storefront.

Customize filters

Filters (facets) let shoppers narrow down search results. By default, the InstantSearch page includes a Category filter and a Price slider based on the default_price attribute.

To add a new filter, select + Add filter in the Filters shoppers can use list, then enter the title to display, select the attribute to use, and pick a display type.

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.

Filters 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, a price or date range, where items within that range display.

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

To reorder the filters, use the arrows on each filter. To remove a filter, select the trash icon. Each filter also has a toggle to turn it on or off without removing it.

After making changes, select Save changes.

When you save filter settings in the BigCommerce app, it updates the attributesForFaceting setting of your Algolia index. Any facets configured outside the app, for example, in the Algolia dashboard or through the API, are preserved. If you remove a filter from the app, it’s also removed from your Algolia index settings.

Customize sort order

By default, InstantSearch sorts results by relevance, which means products are ranked based on how well they match the user’s . No other sort options are available unless you configure them.

Custom sort order lets you give users more ways to sort search results, such as by price, newest arrivals, or popularity. It helps them find products more easily based on their preferences.

To enable additional sort options, add replica indices. Each replica index represents a different sort order (for example, “Price: Low to High” or “Newest First”). Once your replica indices are set up, you can add them as sort options in the InstantSearch settings.

To add a new sort order:

1. Select + Add sort order in the Sort orders list.
2. Enter the title you want to display for the sort order (for example, “Price: Low to High”).
3. Select the corresponding replica index from the list.

After making changes to the sort order, select Save changes to apply them.

Once configured and saved, users see a drop-down list of sort options on your search results page. Selecting a sort option reorders the results according to the chosen criteria.

Limitations

• Create a separate replica index in Algolia for each sort order you want to offer. This may increase your index count and usage.
• If no replica indices are added, only the default Relevance sort is available.
• Changes to sort options may take a few moments to appear on your storefront, depending on cache and propagation times.
• Removing a replica index from Algolia without updating your InstantSearch settings may cause errors or missing sort options.

For more information about creating and managing replica indices, see Sorting.

InstantSearch categories

InstantSearch categories let you display InstantSearch on category pages with different filters and settings for each category.

To enable InstantSearch categories, you need:

• InstantSearch turned on for the channel
• At least one category in your shop
• At least one category with products in it.

To enable InstantSearch categories, use the toggle in the InstantSearch Categories section.

You can also turn individual categories on or off in the category list.

When you update, delete, or create a category, select:

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

Placement on category pages lets you specify where on the category page the InstantSearch categories widget should be displayed. The default is category_below_header.

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

Customize InstantSearch categories filters

Category filters let you display different filters for different categories in your shop. If you don’t customize the filters for a category, it inherits the default InstantSearch filters.

To add, remove, or reorder a category’s filters, select Edit filters next to the category, then select Save changes to apply them.

Filter data, including the 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).

The hierarchical category facet supports up to eight category levels (categories.lvl0 to categories.lvl7). Deeper category trees aren’t shown in the facet.

Customize the InstantSearch page

InstantSearch is pre-configured for the Cornerstone theme in BigCommerce. For other themes, you might need to adjust the InstantSearch CSS and JavaScript to match. See Customize search settings: in the code editor, select the InstantSearch tab.