Setting up Filters on Collections through embedding HTML into Online Store 2.0 themes

In this article, you’ll learn how to set up Filters on collections through embedding HTML code into Online Store 2.0 themes (Dawn, next-generation themes). If you use a Vintage theme, you should look for the appropriate instructions here.

There are two ways to set up Filters on collections through embedding HTML code:

1. Customize your theme – the easiest one
2. Edit your theme code – requires skills to edit theme code

Customizing Online Store 2.0 themes

Customizing your theme is the most straightforward way to set up Filters on Collections. To do that, follow these steps:

1. Go to Searchanise Search & Filter control panel > Filters > Filters on collections section.
2. Select the Navigation through embedding HTML into the Shopify template option.
3. Apply the changes.
4. Go to Shopify admin panel > Online store > Themes.
5. Find the theme you want to customize, and click the Customize button.
6. Go to the collection page.
7. Disable the Product grid section in the sidebar, and add the app’s Filters on collections section.

   

8. Save the changes.

That’s it. The Filters on collections feature is set up through your collections.

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

Editing Online Store 2.0 theme code

Setting up Filters on collections by editing theme code requires more enhanced skills because you need to edit theme code.

To set up Filters on collections follow these steps:

1. Go to Shopify admin panel > Online store > Themes.
2. Find the theme you want to edit, and 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. See the instructions here.
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 the theme template

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

1. In the Templates directory of the Code Editor click collection.json.
2. Find the collection’s section name that shows products in the type attribute:
   1. For most of the themes it is main-collection:

      

   2. For themes by Shopify it is product-grid:

      

3. Open the file with the found name in the Sections directory. In the examples above, it is main-collection.liquid, or main-collection-product-grid.liquid, but your theme may have another file name.
4. Replace the Shopify code with the code from the created snippet, using the following code: {% render 'searchanise-navigation' %}. For example, comment out all the code except the schema’s code and paste the Searchanise code: 

   

   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 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]

5. Save the changes.

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