Installing the Shopify Collection Filter App

Installation of the novusweb360™ Shopify Collection Filter is straight-forward and should be fairly easy for many. Below are step-by-step instructions on how install the app and prepare it for your store.

Access App Store

Collection Filter App Store

Install App

Authorize App Installatoin

After the app is installed into your backend:

  • Click Install.
  • Click Agree after the app is installed on your store.

Use the Installation Wizard

At the bottom of the Dashboard screen is the Installation Wizard. By using this wizard, you’ll ensure that the proper components of the app are installed in your theme and will guide you to completion of all the preparatory steps.

Installation Wizard

  • Click Install Files Now to allow our app to install needed snippets for your theme.
  • Click Next to proceed to the next step.

The second step will inform you about installing small code snippets into your theme. Detailed instructions are provided later on this page.

If you upgrade, re-install or replace your current theme, you must complete the Installation Wizard again.

 

Install Code Snippets

In order for the sidebar, breadcrumb and product attributes to appear in your Shopify theme, you have to install three small snippets into your theme.
Installing code into themes can sometimes be tricky. If you’re not familiar with altering your store theme, you may want to consult with your store developer or utilize our Installation service. Also, any updates of your theme that may be applied in the future will overwrite the snippets added to your theme.
Before making changes to your theme, we highly advise making a duplicate of your theme and making changes to the duplicate theme. Once you’re sure the changes are to your liking, you can activate the duplicate theme for your store.

To Modify Your Theme

  • Go to Online Store > Themes in your Shopify store administration backend.
  • Go to Actions > Edit Code in the dropdown for your theme.

Modify Shopify Theme Code

Before installing these snippets, be sure you have completed the Installation Wizard steps for the application. The wizard will install several files referred by these snippets.

Installing Sidebar Snippet

If your theme does not have a Collection template that already has a sidebar section, you may need to experiment with where to include the snippet code for the Collection Filter sidebar. Moreover, without an existing sidebar section, the addition of the Collection Filter sidebar may affect how your Collection page is shown on mobile devices. For themes without a sidebar section, we recommend you consult with your development partner or request Customization from novusweb360™.
  • In your theme files, find the one used as your Collection Template. Some themes may have more than one, depending on whether you are able to use different layouts for your collections. You can install the Sidebar Snippet in as many template files as you need.

Choose Collection Template File

Modern Shopify themes generally use Sections instead of Templates for displaying the content of a Collection. If your collection.liquid file has code similar to {% section ‘collection-template’ %}, you need to find the Collection Section file.

Choose Collection Section

In still other themes, the sidebar may be a main feature on all pages. In these cases, the theme sidebar may need to be modified to add our code snippet to appear on collection pages.

You should consult with your development partner or request installation services from novusweb360 if you’re not sure where to place our code snippets.

  • Open the chosen file by clicking on it. It will appear in the right panel.
  • If your theme already has a sidebar for the collection layout, find code similar to {% include ‘collection-sidebar %}.
  • Replace the found code with:
{% include 'nw360cf-sidebar' %}
  • Click Save.
If you are using the Sidebar feature of this app, you should disable any Tag Filter dropdown that may be present in your theme. If you want to allow customers to filter by Tag, you can activate it to appear in your sidebar (see Settings in the app).

Installing Breadcrumb Snippet

Optional. By installing our enhanced breadcrumb into your Collection template, your users will be able to navigate between various filters views of your collection, as well as have a clear indication of the filters they have chosen.

Breadcrumb View

Using the same Collection template you used to insert the sidebar snippet:

  • Locate an existing breadcrumb code or find a location you wish to add your breadcrumb.
  • Replace the existing code or add to your template:
{% include 'nw360cf-breadcrumb' %}
  • Click Save.
Usually, the breadcrumb will be located at the top of your Collection template. If you’re unsure where to place the code, please consult with your development partner or request assistance from novusweb360.

Installing Product Attributes Display

Optional. If you wish to show the attributes you assign to your products on your Product Detail page, you can add a simple snippet wherever you would like the attributes to show.

Product Detail View

  • Locate your Product Detail template or section file.
  • Determine where you would like your attributes to appear and insert the following:
{% include 'nw360cf-product-attributes' -%}
  • Click Save.

Uninstalling the App

To uninstall the novusweb360 Collection Filters app, you need to complete two steps:

Remove Theme Snippets

When you installed the app, you (or your developer) added up to three small code snippets to your theme in order to have the app display your filtered attributes and/or a breadcrumb navigation.

Since this installation varies depending on your theme, you may need some assistance in removing this code. However, with a little searching in your theme files, you should be able to locate and remove the code.

  • In your store backend, go to Online Store > Themes.
  • Click the Actions button in the Current Theme section and select Edit Code in the button dropdown.
  • Each of the files referenced below can be located in the list of theme files shown.

The sidebar navigation code is usually installed in your Sections > collection-template.liquid template file. If you have more than on collection template file, you should check each one. Find and remove the code that looks like {% include ‘nw360cf-sidebar’ %}.

The breadcrumb code is usually located in the same files as the sidebar navigation, and looks like {% include ‘nw360cf-sidebar’ %}.

Finally, the product attributes code, if used, will generally appear in the Sections > product-template.liquid file. The code to remove here looks like {% include ‘nw360cf-product-attributes’ %}.

Shopify themes can vary considerably in how they are built. Therefore, we can’t always be exact in describing where the code is inserted. Furthermore, you have flexibility in where and how you want the app to display its various features.

Remove Theme Files

After removing the code snippets, you can optionally elect to remove the three liquid files added to your store theme. Leaving them in place will not impact your store, but if you do wish to remove them, you certainly may!

If you have not yet removed the Collection Filter app from your store, the easiest way to remove the theme files is to click Uninstall on the Dashboard screen, just below the Installation Wizard. The app will quickly remove the theme files.

If you have already removed the app or wish to manually remove the files:

  • Go to Online Store > Themes in your store backend.
  • Click Actions and select Edit Code in the Current Theme section.
  • Find and remove the following files in the Snippets folder of your theme files:
    • nw360cf-breadcrumb.liquid
    • nw360cf-product-attributes.liquid
    • nw360cf-sidebar.liquid

And just like that, you have removed the files!

To complete uninstalling the app, simply click the Trash can icon next to the app under Apps in your store backend.