Manual guide to setup Search's filter and the Auto Suggestion feature

Please note that this Setup Instruction is only for Advanced Developer who is experienced in HTML, CSS, Liquid, Javascript. 

Step 1: Upload the asset files

- Download Asset files from this Zip package:

Vertical Filter:

Horizontal Filter:

- Extract the downloaded file

- Upload the files to your theme (Overwrite these files if they are existed)

  + Upload the file snippets/bc-sf-filter.liquid to the theme's folder snippets

  + Upload all files from the package's folder assets to the theme's folder assets

- After completing the above steps, the Auto Suggestion feature will be integrated successfully into your theme.

Step 2: Integrate the Filter into the Search page

- Copy the content of the Collection template (collection.liquid or collection-template.liquid). There should have the code of our app in this template if the filter is installed successfully.

- Paste it to the Search template (search.liquid).

- Remove the product loop: {% for product in collection.products %} ... {% endfor %}

- Remove {% paginate collection.products by ... %} and {% endpaginate %}

- Add the Search form to the appropriate place (you could place it above the product list) 

- Add this script: <p class="bc-sf-search-result-number"></p> to the place where you want to display the number of Search result.