Integrations
/
Platforms
/
Shopify
/
Custom InstantSearch Implementation
Oct. 13, 2020
Custom InstantSearch Implementation
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
8
9
10
11
12
13
14
15
16
17
18
19
<head>
<!-- ... -->
<script
src="https://cdn.jsdelivr.net/npm/algoliasearch@4.5.1/dist/algoliasearch-lite.umd.js"
integrity="sha256-EXPXz4W6pQgfYY3yTpnDa3OH8/EPn16ciVsPQ/ypsjk="
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.8.3/dist/instantsearch.production.min.js"
integrity="sha256-LAGhRRdtVoD6RLo2qDQsU2mp+XVSciKRC8XPOBWmofM="
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:
- Go to the Themes tab of your Shopify admin.
- Click the action button on the theme you plan to implement InstantSearch in.
- Select the edit code option. This will take you to a code editor.
- Click on the Assets folder in the sidebar.
- Click Add a new asset.
- 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
const searchClient = algoliasearch(
'YourApplicationID',
'YourSearchOnlyAPIKey'
);
const search = instantsearch({
indexName: 'shopify_products', // your Algolia products index name
searchClient,
});
search.addWidgets([
instantsearch.widgets.searchBox({
container: '#searchbox', // update this selector to match your search page
}),
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.
