Algolia DevCon
Oct. 2–3 2024, virtual.
Integrations / BigCommerce

Customizing search settings

Learn how to customize Autocomplete and InstantSearch CSS and JavaScript in BigCommerce.

Customize CSS and JavaScript

Autocomplete and InstantSearch are pre-configured for BigCommerce’s Cornerstone theme. For other themes, you might need to tweak the autocomplete or InstantSearch CSS and JavaScript.

To do this, open the CSS or JavaScript editor: go to the Search settings tab in your BigCommerce app and click the Edit button for CSS or JavaScript.

Autocomplete customization in the BigCommerce app

When ready, click Save at the bottom-left of the editor, then click Save on the main Search settings page to publish your changes.

Restore default CSS and JavaScript

  1. From the Search settings tab in your BigCommerce app, click the Edit button for CSS or JavaScript.

Autocomplete settings in the BigCommerce app

  1. Click Reset to default at the bottom-right of the editor.
  2. Confirm that you want to reset the CSS or JavaScript code to its default. This removes your customizations.
  3. Click Save at the bottom-left of the editor, then click Save on the main Search settings page to publish your changes.

Updating CSS and JavaScript

A red ‘Updates available’ banner will be displayed in the Search settings tab when there’s a new update for the autocomplete or InstantSearch CSS and JavaScript. To update the CSS or JavaScript, click the Edit button.

Updates are performed periodically by Algolia, so you might not see an update available immediately.

The difference between existing and new code is shown. Paste in or edit any required customizations, then click Apply Changes to apply the updates.

Autocomplete differences editor

Did you find this page helpful?