Setting up Filters on Collections through embedding HTML into Vintage themes

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 Vintage theme 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 so, follow these steps:
   1. 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.
   1. Save the changes.
4. Replace the Shopify code that shows collections with the Searchanise code from the created snippet. Follow these instructions.
5. Go to Searchanise Search & Filter control panel > Filters > Filters on collections section.
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 trouble 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:

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, which is included in your file. You can replace it with the Searchanise code:

   

   or go to that section, comment out the code for filters and the 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 to regulate when the inserted code should be implemented. See an example:

   {% if collection.handle == '[collection_handle1]' 
   or collection.handle == '[collection_handle2]' %} 
       //keep here the default collection template code 
   {% else %} 
       {% render 'searchanise-navigation' %} 
   {% endif %}
   

   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.