Searching and Filtering Custom Fields using Algolia
In this advanced tutorial, we'll show you how to install Algolia search into your Shopify store and configure it with Custom Fields
In this example, we'll show you how to create a text list field that will act as a facet to filter our products by category.
Algolia is a powerful integration & search app that takes the place of Shopify Search. It has more custom options for narrowing search results like facets and filters. You can read more about it on their website here.
Note: Their app must be installed from their website. It is no longer listed in the app store. https://community.algolia.com/shopify/
STEP 1: In the app, create a new product field
For this example, we will be using the machine name "fabric". You can name it what you would like and it will work similarly.
In this example, we are using a set list of drop-down options, but you can use any field type in the app and it will work the same way in Algolia. Make sure to fill out the Options with different subcategories, if you're using the option list like we are in the example. These will act as the items you can filter by. Click Save New Field at the bottom when finished.
STEP 2: Edit Custom Fields on different products.
This step is crucial for the facets to function properly while testing. Edit Custom Fields on any product and select the category for the item under fabric.
STEP 3: Sign up for Algolia
Sign up or login to an Algolia account.
*Note: Basic setup includes a short, skippable tutorial at the beginning, the next step will begin when the user finishes setup.
STEP 3: Get the Algolia Shopify App
If you don't already have it installed here is a link where you can install it to your store.
3.1 Once it is installed, go to the indexes tab and click on "Manage Metafields"
3.3 Click on "Add a metafield" and enter the info for the machine name you set up earlier (in this example: fabric). You will always use custom_fields as your namespace and your key will be the machine name of the field you created. You can read more about this topic in more detail here.
3.3 Go to the "Search Options" tab and scroll to the "Facets" section. In the "Inactive" section, you should see your new "Fabric" facet, click and drag it to the active row to activate it and click Save.
3.4 Go to the Display Tab and scroll until you see "Use InstantSearch" make sure that it's checked. This will replace Shopify's built-in search in your store with Algolia's Instant Search.
STEP: 4 Test your results!
Go to your store search page (https://yourstorenamehere.myshopify.com/search). You will now see the Algolia Instant Search instead of the default Shopify one. Note that your facets are now available as search filters.
