Customize search settings

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 adjust the Autocomplete or InstantSearch CSS and JavaScript.

To do this:

1. Go to Search experience in the app and select the storefront channel.

2. Select Edit code at the top of the page.

3. In the code editor, pick the feature (InstantSearch or Autocomplete) and the language (CSS or JavaScript).

   

4. Make your changes, then select Save & publish to apply them to the channel’s live themes.

Code changes apply to the selected channel only and don’t require reindexing.

The combined size of the code injected into your store is limited to 65,536 characters per feature. If your custom CSS or JavaScript exceeds this limit, saving fails with an error that states how many characters to remove.

Restore default CSS and JavaScript

1. In the code editor, pick the feature and language you want to reset.
2. Select Reset to default. This replaces the code in the editor with the latest default version and removes your customizations.
3. Select Save & publish to apply the change.

Update CSS and JavaScript

The version badge in the code editor shows the version of the default code your customizations are based on. When Algolia releases new default code, the badge changes to update available.

Algolia performs updates periodically, so you might not see an update available immediately.

To update:

1. In the code editor, select View update next to the version badge. The editor shows the differences between your existing code and the new version.
2. Select Apply update. Applying replaces the current code in the editor, so re-apply any customizations you want to keep.
3. Select Save & publish.