How to set up Smart navigation through Shopify collections Print

Modified on: Tue, Jun 22, 2021 at 6:05 PM

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

Note: Smart navigation through Shopify collections is available starting from the $18/month plan.

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 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 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 one of these options in the Searchanise control panel on the Filters on collections page:

1. Navigation through redirecting Shopify collections links

In this case, Searchanise will replace all links to collections ([store_url]/collections/...) in your store with 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 and display your collections titles, you'll need to modify the page.liquid template of your theme by adding 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 the 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:

2.1. Go to the 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 name searchanise-navigation.liquid.

4. Copy and paste the code from 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 → Filters on collections 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.