In this article, you’ll learn how to set up Filters on collections through embedding HTML code into Vintage themes. 

If you use an Online Store 2.0 theme (Dawn, next generation themes), you should look for the appropriate instructions here.

Setting up Filters on collections

To set up Filters on collections through embedding HTML code into Shopify template, follow these steps:

  1. Go to Shopify admin panel > Online store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. Create a snippet with the Searchanise code that will be used instead of the Shopify code. To do that, follow these steps:
    1. Go to the Snippets directory, then click on the Add a new snippet link.
    2. Enter searchanise-navigation name for the snippet and click the Create snippet button.
    3. Copy and paste the code from this file to the created snippet.
      Important
Replace API Key in the first line of the code from the file with your current API Key:

      

You can find the API key in the Smart Search & Filter control panel > Dashboard section:
    4. Save the changes.
  4. Replace the Shopify code that shows collections with the Searchanise code from the created snippet. See the instructions here.
  5. Go to Smart Search & Filter control panel > Filters on collections section > General tab
  6. Select the Navigation through embedding HTML into the Shopify template option.
  7. Apply the changes.

That's it. The Filters on collections feature is set up. You can go to your collections in the storefront and check out how it works.

If you face any troubles with setting up the feature, you can contact us. We will be glad to help you.

Replacing Shopify code in Vintage Themes

To replace the Shopify code in Vintage Themes, follow these steps:

Important
We recommend backing up the files before changing them. If you disable the Navigating through embedding HTML code into the Shopify template option or delete the app, you’ll have to insert the code you removed back.
  1. In the Templates directory of the Theme Editor click collection.liquid.
  2. Replace the Shopify code that shows collections with the code from the created snippet using the following code: {% render 'searchanise-navigation' %}.

    For example, you have a collection-template.liquid section included in your file. You can replace it with the Searchanise code 

    or go to that section, comment out the code for filters and collection's product list, and paste the Searchanise code to keep the collection title and description: 
    Tip
To exclude a specific collection from Filters on collections, add liquid conditions to the template that will regulate when the inserted code should be implemented. See the example: 
    {% if collection.handle == '[collection_handle1]' or collection.handle == '[collection_handle2]' %}
//keep here the default collection template code
{% else %}
{% render 'searchanise-navigation' %}
{% endif %}
    		

    			

    			
    Generic
    Paste your collection handles instead of [collection_handle1], [collection_handle2]
  3. Save the changes.

That's it. Go to the fifth step of the main instructions.