Integrations / Platforms / Shopify / Customization Setup
Jun. 24, 2019

Customization Setup

To set up your search UI, open the Shopify Theme Editor and do the following:

1. Import the InstantSearch libraries

To import the InstantSearch libraries into your shop, add the following lines to the theme.liquid layout right before </head>:

Copy
1
2
3
4
5
6
7

<head>
    <!-- ... -->
    <script src="https://cdn.jsdelivr.net/npm/algoliasearch@3.32.1/dist/algoliasearchLite.js" integrity="sha256-pMaJf0I78weeXGkRMBDO6jSulxC/q3sb0aPdtV2N8n0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@3.2.0" integrity="sha256-/8usMtTwZ01jujD7KAZctG0UMk2S2NDNirGFVBbBZCM=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.1.1/themes/reset-min.css" integrity="sha256-JQ2nnTmybhOWSjfV3sa8mG0ZVhTCcORER4cyXc5HL10=" crossorigin="anonymous">
    {{ 'search_ui_instant_search.js' | asset_url | script_tag }}
</head>

2. Initialize the InstantSearch client

To initialize the InstantSearch client in your shop:

  1. Go to the Themes tab of your Shopify admin.
  2. Click the action button on the theme you plan to implement InstantSearch in.
  3. Select the edit code option. This will take you to a code editor.
  4. Click on the Assets folder in the sidebar.
  5. Click Add a new asset.
  6. Create a file called search_ui_instant_search.js. In this file, put the following bootstrap snippet:
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

const searchClient = algoliasearch(
    'YourApplicationID',
    'YourSearchOnlyAPIKey'
);

const search = instantsearch({
  indexName: 'shopify_products', // your Algolia products index name
  searchClient,
});

search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#searchbox', // update this selector to match your search page
  })
);

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits', // update this selector to match your search page
  })
);

search.start();

3. Build your search UI

You can now build your search UI.

You can choose which InstantSearch widgets you want to use by looking at the InstantSearch documentation.

Did you find this page helpful?