Navigate to the themes section in Shopify.

Edit the theme

Under “Actions” select “Edit code” to navigate to the code edit view for the theme.

Under Templates, find the file called “search.liquid”. Replace the content of the file with the following code.

Replace YOUR_ACCOUNT_NUMBER and YOUR_COLLECTION_NAME with your search.io credentials.

Copy the content of the “search.liquid” file and keep it as a backup before you overwrite it. 

<div data-widget="search-results">
  <script type="application/json">
    {
      "account": "YOUR_ACCOUNT_NUMBER",
      "collection": "YOUR_COLLECTION_NAME",
      "pipeline": "query",
      "preset": "shopify",
      "filters": [
        {
          "name": "vendor",
          "field": "vendor",
          "title": "Vendor"
        },
        {
          "name": "type",
          "field": "product_type",
          "title": "Type"
        },
        {
          "name": "collection",
          "field": "collection_titles",
          "title": "Collection",
          "array": true
        }
      ]
    }
  </script>
  <noscript>This page requires JavaScript</noscript>
</div>
<script async src="https://cdn.search.io.com/embed/1/loader.js"></script>
JS

Preview your changes

After changing the code, preview the changes and ensure the search works and looks the way you would expect.

Save your changes

If you are happy with the results, save your changes.