> For the complete documentation index, see [llms.txt](https://truestorefront.gitbook.io/owen-hydrogen-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://truestorefront.gitbook.io/owen-hydrogen-shopify-theme/algolia-search.md).

# Algolia Search

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

{% embed url="<https://dashboard.algolia.com/users/sign_in>" %}

<figure><img src="/files/tIHy70X5zuP4uAli5mE8" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/jsRvqU3Wh8rsyqSomRhC" alt=""><figcaption></figcaption></figure>

**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.

<figure><img src="/files/LMrN7RypXSYmRnSknHCp" alt=""><figcaption></figcaption></figure>

**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:

<figure><img src="/files/vlwBoGCjqBmwiLVpbbky" alt=""><figcaption></figcaption></figure>

*\*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**

<figure><img src="/files/KsCSKcyzSYAGFn8wLg0y" alt=""><figcaption></figcaption></figure>

Learn more about Algolia Configuration below:

{% embed url="<https://www.algolia.com/doc/tools/crawler/apis/configuration/>" %}