How to setup Smart navigation through Shopify collections

Modified on: Tue, Dec 10, 2019 at 1:26 PM

Smart navigation allows to add Searchanise filters to your store collections. 

Note: Smart navigation through Shopify collections is available only for the $18 subscribers.

A common issue that may occur: 

A collection in your store suddenly shows all the products in your store.

1) It's a new collection and it hasn't been indexed by the Searchanise yet.
Please note that Searchanise doesn't index collections automatically, so after creating one you need to click the Force re-indexation button in the Dashboard section.

2) Smart navigation was disabled (in case you set up the Navigating through embedding HTML code into the Shopify template) or your current plan does not support the feature.

To use the Smart Navigation feature you need to enable in the Searchanise Admin Panel on the Navigation page one of these options:

1. Navigation through redirecting Shopify collections links

In this case Searchanise will replace all links to collections ([store_url]/collections/...) in your store to the links that lead to the page with the Searchanise search results widget ([store_url]/pages/search-results-page?collection=...). Now clicking on the collection link will show products in the Searchanise search results widget.

In order to hide the “Search Results” page title when viewing products in the collections, in the templates/page.liquid page templates, you’ll need to add the snize-search-results-page-title css class to the element that contains the page title. Take a look at the example:

<h1 class="snize-search-results-page-title">{{ page.title }}</h1>

Important: The links are replaced using the javascript code that starts executing only after the page is loaded, we recommend that you accelerate loading of Searchanise scripts using this guide.

In this case links will not be replaced, but you’ll need to modify store templates to make the Searchanise search results widget replace the code that displays products.

In order to do that, please do the following:

1. Go to Online Store - Themes section of the admin panel of your store and click Actions - Edit code.

2. Click Snippets - Add a new snippet.

3. Insert searchanise-navigation.liquid into the input field and click Create snippet. This way you’ll create a new snippet with the searchanise-navigation.liquid name.

4. Copy and paste the code from the this file to the created snippet.

5. Replace [API Key] in the first line of the code with your current API Key

You can find the API key at Smart Search & Instant Search app → Dashboard tab.

Please do not forget to click Save. 

6. Then you’ll need to change the collection.liquid template. To do it go to Templates - collection.liquid and replace the Shopify code that shows collections with the following code:

{% include 'searchanise-navigation' %}

Please do not forget to click Save.

7. Go to Smart Search & Instant Search app → Smart Navigation page. Choose Navigating through embedding HTML code into the Shopify template. Please don’t forget to save the settings by clicking Apply Changes!

P. S. 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 Searchanise application, you’ll have to insert the code you removed back where it was.

Did you find it helpful? Yes No

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