🎉 Try the public beta of the new docs site at algolia.com/doc-beta! 🎉
Integrations / BigCommerce

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

InstantSearch results page with widgets for filtering by price range or size and products displayed as cards

Configuration

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

InstantSearch settings in the BigCommerce app

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.

Customizing facets

The InstantSearch page comes with a default facet for the default_price attribute.

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 in the dashboard. Making a facet searchable allows the user to enter a value to filter the results for that facet, for example, color or size.

Facet settings in the BigCommerce app

Facets can be displayed as a conjunctive or disjunctive list, an input range, or a slider.

  1. Conjunctive List: users select multiple options; all selected criteria must match for items to appear.
  2. Disjunctive List: users choose any combination of options; items matching any selected criteria show.
  3. Input Range: users specify a numeric range. For example, price or date, and items within that range display.
  4. 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.

You can limit the amount of facet options displayed in InstantSearch by changing the Facet Option Limit setting.

After making changes to the facets, click Save.

Customizing sort order

The default sort ordering option is Relevance.

To add sort ordering options, first add replica indices

Facet settings in the BigCommerce app

When the replicas have been added, apply sorting to 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

Did you find this page helpful?