Shopify Collection Filter App Documentation

Welcome

We’re pleased you’re using the novusweb360™ Shopify Collection Filter App. This enhancement will add filterable navigation to your collection sidebar and intelligent breadcrumbs.

Methodology

Before you begin using this app, it may be useful to understand the overall methodology and terminology we use to configure and use this app to it fullest potential.

Filtered Navigation

The sidebar navigation added to your store by using this app is referred to as “filtered navigation.” That means that the customer can navigate within a collection by filtering the results. A customer filters results by selecting one or more choices of Attribute Values from the list shown in the sidebar.

Attributes

Attributes are various features or specifications you wish to assign to products. Attributes such as size and color are often set for use in creating variants in Shopify. However, many times, you need to note other attributes for products that apply to the product and all its variants. These attributes could include width and height, voltage, material, focal length, etc. Furthermore, the ability to filter collections or search results by these attributes could greatly help your customers find exactly the products they want to buy.

Attribute Values

The actual value assigned to an attribute is called the Attribute Value. For example, if “Material” is the attribute, possible attribute values may include cotton, polyester, blend, silk or wool. You have full control over the choices of attribute values. Values can also include swatch images.

Attribute Sets

Not all products will share the same kinds of attributes. For instance, you would probably have different attributes (focal length, megapixels) for cameras than you would for shoes (upper material, sole). In order for customers to be able to compare “apples-to-apples” and to make it easier for you to manage attributes, we group attributes into sets, which can then be applied across multiple like products. You might create attributes sets for cameras and shoes. You could also create attribute sets for digital cameras, film cameras, dress shoes and athletic shoes. The granularity you choose is up to you. In the filtered navigation sidebar, provided by this app, each attribute set represented by products within the Collection will be shown separately. Each attribute within each set will be shown underneath the name of the attribute set.

The App Interface

It may be helpful as you work with the app to get a quick introduction to its interface. Refer to this screen image of the app for the descriptions given below. App Dashboard

  1. Dashboard. This view shows the default Dashboard of the app. You can return to this screen anytime by clicking this menu item.
  2. Attribute Sets. Use this screen to add or edit Attribute Sets.
  3. Attributes. On this screen, you can add or edit Attributes within your Attribute Sets.
  4. Products. This menu has two sub-menus: Edit Products and Import Attributes.
    • Edit Products. Use this screen to assign Attribute Sets to products and set values for the Attributes within the assigned Attribute Set.
    • Import Attributes. You can easily upload a CSV file to set Attribute Sets and Attribute Values for many products.
  5. Settings. Go to this screen to configure various settings relating to how your filtered navigation will appear and function.
  6. Update Queue. Shows the progress of updating your changes to your Shopify store. Only appears when an update action is occurring.
  7. File Imports. When importing product attributes, this will appear and show the name of the imported file.
  8. Collapse Button. Click this button to collapse the left sidebar, giving you more room for the main panels.
  9. Notifications. Periodically, we may push notifications to you regarding updates and other important information. A counter will appear when notifications are present to be read.
  10. Support. Clicking this link will take you to our novusweb360™ Support section of our website.
  11. Installation Wizard. Use this tool to initially go through the quick installation process before you begin configuring the app for your use.
  12. Live Chat. If you need immediate assistance, you can request a live chat conversation with our support team. If after hours, you may leave a message and we will get back with you as soon as possible.

Using the App

The following are step-by-step instructions for installing and using this app. We highly suggest you read through this documentation before you use the app in order to prepare your information and processes to get the most from this app.

When updating information in the Collection Filter app, the system sends those updates to your Shopify store. A progress bar will visually indicate the progress of this update. Due to API speed limitations on Shopify stores, large changes may take a while to complete. Additionally, changes to your store may take a moment or two to appear as they replicate through the Shopify servers, databases and caches.

Installing the App

Grab the app from the Shopify App store and complete the installation wizard included in the app.

Getting Started

Once installed, you can begin creating product attributes and assigning them to your catalog.

Importing Attributes

For stores with large catalogs, you can use a simple CSV file to import many attributes.

Styling

CSS styling of various features on the front-end are beyond the scope of this documentation. Styling via CSS is a wonderful way of customizing a web page. However, the number of possible configurations and methods for adding CSS to your theme is a special skill.

We have included special “classes” to assist your Shopify developer in easily modifying the look of the sidebar, breadcrumb and product page attributes.

The CSS file that is used to style the snippets of this app is accessible in your Shopify store backend:

  1. Go to Online Store > Themes in your store admin.
  2. Select Edit Code under Actions.
  3. Find the file, nw360cf.scss.liquid under the Assets directory.

In this file, you can modify the various included CSS classes and elements of the app snippets.

If you need assistance with customization, you can request customization assistance from novusweb360.