Collection search page

Enable InstantSearch on your Shopify collection pages

As of December 31, 2023, Shopify no longer allows apps to modify theme code. To integrate Autocomplete and InstantSearch, use the Algolia AI Search & Discovery app’s App Embed and App Blocks. To get started, see Quickstart and Algolia configuration.

With the Algolia AI Search & Discovery app for Shopify, you can enhance your collection pages with real-time search.

Collection search pages list products from a collection. Usually, they have URLs with the following pattern: /collection/<collection-name>.

When you modify a collection, all products from the collection are reindexed. Enabling the collection search feature increases the number of indexing operations.

All products

Shopify automatically creates a page at the URL /collections/all that lists all your products. To enable InstantSearch on this collection list page, you must create a collection called all in the Shopify Admin.

Turn on Algolia on collection pages

To enable Algolia on your collections, go to the Collection pages tab and click Enable.

Once the feature is enabled, all your products and collections will be reindexed to ensure that all required data is available.

Once the reindexing is done, InstantSearch will be enabled on your Collection pages. You can now configure how it behaves.

Configure Algolia on collection pages

Enable InstantSearch on collection pages

1. Add the Algolia Search App Embed to your theme.
2. Add Algolia App Blocks. App Embed must first be enabled before the App Block will work.

Products to be displayed

The number of products to show per page for your collections.

Sort orders

In this section, you can choose which sort orders you want to activate for your collections, how you want to call them, and which ones you want to display first.

For each sort order, a new index is created with as many records as your main index. Make sure that an increased record count won’t exceed your plan’s quota.

For more information, see Sorting.

On collection pages, the manual order defined in the Shopify admin don’t apply. To customize the order, you can use the visual merchandising tool.

Facets

In this section, you can choose which facets to activate for your collections, how you want to call them, and which ones you want to display first.

Facets are primarily used to refine searches. For more information, see Filtering.

Configure with Merchandising Studio

By default the Shopify category pages use the collection_ids attribute as a category page identifier.

To create a more accessible interface to merchandise your categories, change the category page identifier to collections.

1. Add a facet

   Add a custom facet called collections in the Algolia app for Shopify 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 frontend code

   Add a custom hook to your Shopify theme to update the search filter using the beforeInstantSearchFiltersString hook:

   JavaScript

   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;
       },
     );
   });
   

   Now, you should the this filter applied on your collection pages.

   

Turn off Algolia on collection pages

To turn off Algolia on Collection pages, go to the bottom of the page and click Disable. Your collection pages revert to their default layout, and InstantSearch no longer shows up.