Getting Started with the Shopify Collection Filter App

Now that the app is properly installed, the following will guide you to configuring the app and applying attributes to your products.

Configure Settings

The Settings panel allows you to customize certain special features of our Collection Feature app.

Please note that after the app updates your site, it may take a moment or two for your settings changes to appear in your store as the Shopify cache updates.

Notification Emails

If you’d like notification emails to be sent to an email address other than your store Administration email address, enter it here.

Notification Settings

Swatches

For Attributes whose type is set to Swatch, you can set the size of the swatch images that will appear in the sidebar navigation. Images you upload for swatches will be re-sized to fit the dimensions you enter here.

Swatch Settings

Other Filters

Our Collection Filter app allows you to show additional filters for Vendor and Product Type. Furthermore, you can change the label of the Vendor. For example, you may want to use “Brands” instead of “Vendor.”

Because of a limitation on how Shopify builds Collection handles when filtering by Vendor and/or Type, the Breadcrumbs feature (optional) will behave a bit differently than when customers are filtering by Attributes. Additionally, the “Clear Selections” function of the sidebar will clear selections on Attributes, but not of Vendor and Type.

Other Filters

Other Sidebar Features

In addition to the Other Filters shown above, you can choose to show any Subcategories of the current Collection (if you’re using the nested navigation feature of Shopify [new]). You can also choose to show all tags of the current product collection.

Sidebar Features

Style Settings

Sometimes, if there are numerous attribute values for a given attribute, the list of choices can appear quite long. You can set a length for the display so that if a list of values is displayed longer than this length, the list of values will become scrollable.

Style Settings

Attribute Sets

The first step in creating product attributes for filtering is to create Attribute Sets. Each Attribute Set can contain many different Attributes. Attribute Sets are then assigned to products so that the Attribute Values can be set for each product.

Creating Attribute Sets

Create Attribute Set

To create an Attribute Set:

  • In the Collection Filter app, go to Attribute Sets in the sidebar menu.
  • In the Create Attribute Set panel, enter the name for your Attribute Set (e.g. “Rings,” “Bicycles,” “Helmets”).
  • Click Add Attribute Set to save your changes.

When you add an Attribute Set, you will be taken to the Attributes panel to begin adding the Attributes you wish to include in the new set.

Editing Attribute Sets

Edit Attribute Sets

  • Click the Pencil icon to edit the name of an existing Attribute Set.
  • Click the List icon to access and edit the Attributes of an Attribute Set.
  • Click the Trash icon to delete an Attribute Set (and any Attributes and Values assigned to the set).

Attributes

Each of the Attribute Sets you create will contain one or more Attributes. These are the names of the various specifications you wish to apply to products.   For example, if you sell Rings, you might create an Attribute Set called “Rings,” with Attributes for Stone, Metal, Caret and so forth. If you apply the Rings Attribute Set to a product, you can then assign the Attribute Values for that item, such as Stone: Opal, Metal: Gold, Caret: 14k, etc.

Creating Attributes

When you create a new Attribute Set, you will automatically be taken to the Attributes screen. You can also reach this screen by going to Attributes in the left sidebar.

Create Attribute

  • Enter the Name of the Attribute you wish to create (e.g. “Metal,” “Voltage,” etc.).
  • Select the Type for your attribute (see below for more information).
  • Click Add Attribute. You will be taken to the Attribute Values screen to begin entering possible values (except for the Text Attribute Type).

Attribute Types

So that your filtered attributes can be managed to avoid duplication, spelling errors, etc., and to provide an easier process to how Attribute Values are assigned to products, our Collection Filter app allows you to assign a Type for each Attribute. Except for the Text Attribute Type, you will create the range of values that can be used when assigning values to products.

  • Select. One value can be selected from a drop-down list.
  • Multi-Select. You can allow more than one value to be assigned from a multi-select dropdown list.
  • Checkbox. Multiple values can be displayed in a checkbox list, allowing one or more values to be assigned.
  • Radio. Only one value from a displayed list can be assigned.
  • Swatch. An image can be selected as a value for the Attribute.
  • Text. Allows the entry of any Attribute Value, not from a pre-defined list of values.

Editing Attributes

Once you have selected an Attribute Set on the Attributes screen, or clicked the list icon next to an Attribute Set on the Attribute Sets screen, you can edit the list of Attributes you have already created.

Edit Attributes

  • Select the Attribute Set you for which you wish to display its Attributes.
  • Click the Pencil icon to edit the name of an Attribute.
  • Click the Trash icon to delete the Attribute (and all values assigned to that attribute across all assigned products).
  • Click the List icon to edit the Attribute Values assigned to the Attribute.

Attribute Values

Except for Text type Attributes, you will provide a selection of values which can be assigned for each of your products.

Creating a list of possible Attribute Values keeps your values consistent. It avoids the possibility of assigning “red” and “Red” for Color, as these would appear as two different filters due to the capitalization difference.

Adding Attribute Values

To begin adding Values to your Attributes, click the List icon next to any Attribute listed within an Attribute Set (see Attributes documentation above). At the bottom of the Attribute Values panel is a form for adding Attribute Values to your Attribute.

Create Attribute Value

  • Enter the Value you wish to add as a possible choice for your Attribute.
  • Enter the numerical order in which you wish to have the Attributes listed when choosing an Attribute and for the order Attributes will be shown in the Collection sidebar navigation in your store. Attribute Order is sorted numerically in ascending order (1, 2, 3 or 10, 20, 35, etc.).
  • Click Add Attribute to save your Value.
Tip: To allow you to easily add new Values in the future without having to re-enter a new Order sequence, use multiples of 10 or 100. For instance, if you initially have Values ordered 10, 20 and 30, then want to include a new Value that will be listed second, you can add the new Value and assign it an Order of 15. Then, your new Value sequence will be 10, 15, 20 and 30.

Editing Attribute Values

Editing Attribute Values

To edit existing Attribute Values:

  • Enter any revised information in the spaces shown.
  • Click Save Changes.

To delete any Attribute Value, click the Trash icon to the right of the Attribute Value.

Deleting an Attribute Value here is immediate and will remove that Attribute Value from all Products to which it may have been assigned. This is non-recoverable.

Assigning Values to Products

Now that you have the Attributes Sets, Attributes and Values established, you can now assign Values to your Products.

Finding Products

To begin editing Product Attribute Values, go to Products > Edit Attributes in the App sidebar.

Edit Product Values

  • Enter a search term into Search Products.
  • Click Search to find products containing your search phrase in the Product Name.

The App will find and display up to 50 matching results.

Results are limited to 50 due to a Shopify API restriction.

At the top of the second column, you can click Show Images and the App will fetch the primary image for each product.

Product Images

Assigning Attribute Sets

For any Products without an Attribute Set showing in the right-most column, you can select one or more Products in the view and assign an Attribute Set. This has to be done before you can assign Attribute Values to a Product.

Assing Attribute Sets

  • Select one or more Products by checking the Select box in the first column.
  • The Assign Attribute Set panel will appear below the list.
  • Choose the Attribute Set you wish to assign to the selected products.
  • Click Save.
Remember that each time you save a value in the App, the Progress Queue indicator in the App sidebar will show you that the App is updating your store product information. This queue may need to complete before you will see the results of your update.

Assigning Attribute Values

Once you have assigned an Attribute Set to your Products, you can select one or more Products in your Search results and assign values for their Attributes.

Assign Product Attribute Values

Unlike assigning Attribute Sets, you can select a single Product and assign Attribute Values by clicking on the Product Name. To assign Attribute Sets, you must use the Select checkbox, even if assigning only a Set to a single Product.
  • Select one or more Products in your Search Results.
  • Assign the Values you wish to apply to the Product(s) selected.
  • Click Save Attribute Values.

Once the Progress Queue has completed, the values should be visible in your store depending on which theme snippets you installed.

Front-end results of your updates in this App may take a moment or two to appear due to caching and database updates in the Shopify servers.