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.
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 values displayed in InstantSearch, change the Facet Option Limit setting.After making changes to the facets, click Save.
When you save facet settings in the BigCommerce app,
it overwrites the attributesForFaceting setting of your Algolia index.
Any facets configured outside the app, for example, in the Algolia dashboard or through the API, are replaced by the app’s facet configuration.
To avoid losing facet settings, configure all your facets in the BigCommerce app.
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:
Click the Plus icon next to Add Sort.
Enter the title you want to display for the sort order (for example, “Price: Low to High”).
Select the corresponding replica index from the list.
After making changes to the sort order, click Save 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.
InstantSearch categories let you display InstantSearch on category pages with different facets and settings for each category.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.
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).
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).
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.
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.
