Algolia Search

This guide will help you install and config to integration Algolia Search with Owen Hydrogen theme

Step 1: Create Algolia account and get appId, appKey information:

Sign inAlgolia

Step 2: Install Algolia app in Shopify Admin

You can install Algolia app for your Shopify store from this link:

https://apps.shopify.com/algolia-search

From Algolia dashboard: View information about records, configure search, request, sort, filter, ... to specify the data that can be showing on the Owen theme.

Step 3: Add ALGOLIA_APP_ID and ALGOLIA_APP_KEY to algolia.config.ts file in root folder of Owen Hydrogen theme, and change your Algolia variables (prefix, all index key):

Refer to the config below that has been applied for the Owen Algolia demo:

*Note: Because Algolia does not store the brand images, you need to upload the brand images to a Shopify media directory (or any other media storage service). Don't forget to change BRAND_IMAGE_URL variable with your brand media directory link.

The brand image file name should be not have special characters, replace each space to '-' and in .webp format.

Ex: Brand name "New Balance" -> image file name should be "new-balance.webp"

You can change the render brand image logic in: app/components/search/SearchBar.tsx

Learn more about Algolia Configuration below:

Configuration | AlgoliaAlgolia Documentation