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 Smart Search & Filter control panel > Filters on collections section > General tab.
  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 troubles setting up the feature, you can contact us. We will be glad to help you.

Editing Online Store 2.0 theme code

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 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 Themes 2.0 templates

To replace the Shopify code in a Theme 2.0 template, 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.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 the example: 
    {% if collection.handle == '[collection_handle1]' or collection.handle == '[collection_handle2]' %}
//keep here the default collection template code
{% else %}
{% render 'searchanise-navigation' %}
{% endif %}{% if collection.handle == '[collection_handle1]' or collection.handle == '[collection_handle2]' %}//keep here the default collection template code{% else %}{% render 'searchanise-navigation' %}{% endif %}{% if collection.handle == '[collection_handle1]' or collection.handle == '[collection_handle2]' %}//keep here the default collection template code{% else %}{% render 'searchanise-navigation' %}{% endif %}{% if collection.handle == '[collection_handle1]' or collection.handle == '[collection_handle2]' %}//keep here the default collection template code{% else %}{% render 'searchanise-navigation' %}{% endif %}{% 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]
  5. Save the changes.

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