By default the Shopify category pages are using collection_ids as category page identifier.
To create a more accessible interface to merchandise your categories, we advise changing the category page identifier to collections. You can find the steps to implement this below.
1. Add a facet:
Go to the 'Search options' tab within the Shopify Algolia app.
Scroll down to the 'InstantSearch - Results page powered by Algolia' section and click 'Customize'.
Add a custom facet called 'collections' with the Shopify-Algolia integration and set it as hidden and searchable:
2. Change the category page identifier:
You can configure the category page identifier on your Merchandising studio settings. To do this, go to Merchandising Studio > Settings > Category Page Identifiers and change the Category Page Identifier to collections
3. Change your front end code:
-
In your Shopify admin, go to Online store > Themes, select the theme you want to update, and click Edit code.
-
Open the Layouts folder and open the theme.liquid file. Copy the snippet below into the <head> section and click save.
<!-- Algolia head -->
<script src="{{ 'algolia_hooks.js' | asset_url }}" defer>
</script>
- Open the Assets folder and select Add a new Asset. Create a JS file called algolia_hooks.js
-
Copy and paste this code into the algolia_hooks.js file and save your changes.
document.addEventListener('algolia.hooks.initialize', function() {
algoliaShopify.hooks.registerHook('beforeInstantSearchFiltersString',
function(defaultFilter) {
if (defaultFilter && defaultFilter.includes("collection_ids")) {
const collectionIDFilterRegex = /collection_ids:"\w+"/g;
const matches = window.location.pathname.match(
/\/collections\/([^/]+)/i
);
const collectionHandle = (matches && matches.length === 2)
? matches[1] : null;
if (collectionHandle) {
return defaultFilter.replace(
collectionIDFilterRegex, "collections:" + collectionHandle
);
}
}
return defaultFilter;
}
);
});
Then, on your collection pages you should be able to see this filter being applied: