How to set up Filters on collections Print

Modified on: Fri, Oct 15, 2021 at 11:10 AM


ON THIS PAGE


Introduction

Filters on collections is a feature, which allows adding Searchanise Filters to your store collection pages. So customers will be able to filter and sort collections based on product attributes.

There are pre-installed filters with the most common attributes like price, product type, vendor, availability, etc. You can add and use as many filters as you need.

Example of a collection page with Filters on collections:

With Filters on collections, customers can narrow down the search in just a few clicks and choose something suitable in your online store.


Note
Filters on collections feature is available starting from the PRO plan up to 5000 products.


Setting up Filters on collections

There are two ways to set up Filters on collections in your store:

  1. Through redirecting Shopify collection links - the app will replace all links to collections ([store_url]/collections/...) in your store with the links that lead to the page with the Search Results Widget ([store_url]/pages/search-results-page?collection=...). Therefore, by clicking on the collection link, you will view products in the Search Results Widget.
  2. Through embedding HTML code into the Shopify template - will be modified the theme code to use the collection template of our app instead of the theme default one. In this case, you will view collection products in the Search Results Widget as in the first way, but collection links won't be changed.

You can choose the most convenient way and follow the instructions.

  

Important
The links are replaced using the custom code that starts executing only after the page is loaded. To avoid it we recommend you accelerate the loading of the app's scripts using this guide.

To set up Filters on collections through redirecting Shopify collection links, follow these steps:

  1. Go to the Smart Search & Filter control panel > Filters on collections section > General tab.
  2. Select the Navigation through redirecting Shopify collection links option.
  3. Apply the changes.
  4. Optionally, hide the Search Results title in the collection pages and display your collections titles.

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.


Tip
To exclude a specific collection from Filters on collections, add the snize-exclude-link class to the necessary collection link. You can do it in the navigation block of your theme. The main menu navigation is included in the header of a theme. See the example: 


Hiding Search Results Title

To hide the Search Results title in the collection pages and display your collections titles, 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. In the Templates directory click page.liquid.
    Note
    If your theme is Online Store Theme 2.0, it has a different structure. In this case:
    • Click page.json in the Templates directory
    • Find the page's main section name in the type attribute: 
    • Open the file with the found name in the Sections directory. In the example above it's main-page.liquid
  4. Find the line with the page title:
  5. Add snize-search-results-page-title CSS class to the element that contains the page title:
  6. Save the changes.


Through embedding HTML code into the Shopify template

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 it, 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:

    1. If your theme is Vintage theme, follow these instructions.
    2. If your theme is Online Store Theme 2.0follow these instructions.
  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.

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, 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 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 %}
    Paste your collection handles instead of [collection_handle1], [collection_handle2]
  3. Save the changes.

That's all. Go to the fifth step of the Setting up Filters on collections through embedding HTML code instructions.


Replacing Shopify code in Themes 2.0

To replace the Shopify code in Themes 2.0, 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 %}
    Paste your collection handles instead of [collection_handle1], [collection_handle2]
  5. Save the changes.

That's all. Go to the fifth step of the Setting up Filters on collections through embedding HTML code instructions.


Disabling Filters on collections

To disable Filters on collections, follow these steps:

  1. If you enabled the Navigating through embedding HTML code into the Shopify template option, then reverse the changes in the collection.liquid file.
  2. Go to the Smart Search & Filter control panel > Filters on collections section > General tab.
  3. Select the No navigation option.
  4. Apply the changes.

That's all. Filters on collections feature s disabled.


Settings

There are some settings for Filters on collections. You can manage them in the Smart Search & Filter control panel > Filters on collections section > Settings tab.


SettingDescription
Sorting
Default sortingChanges the collections sorting. Default sorting is Date: New to Old.
If the collection was added to the Manual sorting list, the default sorting for it will be named Featured.
Show out of stock products at the end of listMoves the out-of-stock products to the end of the products list. The option is disabled by default.
SEO
Include collection part in product urlIncludes the collection's handle into the product URL, for example, your_store.com/collections/watches/products/watch_1.
The setting is enabled by default.
Override collection SEO informationOverrides the page titles and meta descriptions of your store with the Searchanise SEO settings: the Smart Search & Filter control panel > Search results widget section > Translations tab > SEO.
The setting is disabled by default.
If it is disabled, it will be used SEO data, adjusted in Shopify.


Manual sorting

See the instructions.


Troubleshooting

Collection in the store suddenly shows all the products

The main reasons:

  1. It's a new collection and it hasn't been indexed by Searchanise yet. Searchanise doesn't index collections automatically, so after creating one you need to click the Force re-indexation button in the Dashboard section.
  2. Filters on collections feature was disabled, but, in case you had set up Navigating through embedding HTML code into the Shopify template, you didn’t return the Shopify code that shows collections.
  3. Your current plan does not support the feature anymore. It can happen when you downgrade your plan or go from the trial plan to the free plan.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.