Filtering Collection Lists

Once you connect a Collection List to a Collection, it will display the first 100 items in that Collection. However, you can choose which items to display, how many items to display using filters and limits. You can even use multiple lists to display more items. These options are available under the Collection List Settings in the Settings Panel.

In this lesson

• Applying filters to a list
• Number of items in a list
• Limiting the number of items in a list
• Setting the first item in a list

This lesson talks about creating filtered collection list in the Designer. Real-time filtering/sorting on the live website (Faceted navigation) is not yet available natively. Vote for this feature.

Applying filters

Filters allow you to show specific Collection items in a Collection List that match whatever filter(s) you create. You can choose from a number of filter rules available for each Collection field type.

To create a filter:

1. Select the Collection List you want to filter
2. Go to the Settings panel (D)
3. Add a Filter under Collection List Settings by clicking on the plus (+) sign
4. Select the field you want to filter by in the first dropdown
5. Choose a rule in the second field
6. Specify a value if needed
7. Click Save

You can add as many filters as you want. You can also delete filters by clicking on the trash can icon next to the filter.

Example 1 - Show featured items only

Let’s say you want to only display featured blog posts on your homepage. To do that:

1. Add, create, and style a “Blog Posts” Collection List
2. Add a Filter in the Settings panel
3. Select the “Featured” Switch field from the first dropdown
4. Choose is on in the second dropdown
5. Click Save

Learn more about the Switch field.

Example 2 - Hide current item

If you have a blog and you want each blog post page to feature a list of other blog posts, you can exclude the current blog post from the list using a filter. To exclude the current Collection item, the blog post in this case, do this:

1. Add, create, and style a “Blog Posts” Collection List
2. Add a Filter in the Settings panel
3. Select the Collection name from the first dropdown
4. Choose is not in the second dropdown
5. The third field will show “current collection item”
6. Click Save

Example 3 - Show related content

Let’s say you want to display all the blog posts written by an author on the Author’s page. You can use a filter to only show those blog posts that reference this Author:

1. Add, create, and style a “Blog Posts” Collection List
2. Add a Filter
3. Select the Reference field for your Authors from the first dropdown
4. Choose Equals in the second dropdown
5. Choose “current Author” in the third one
6. Click Save

Now, each author page will show a list of the blog posts that reference this author.

Learn more about the Reference field.

Number of items in a list

When you add a Collection List onto your page, you can see the number of items it is displaying under the Collection List Settings in the Settings Panel.

When you apply any filter to a list, the number of items will change to reflect the number of items the filter applies to.

Limiting the number of items in a list

You can also limit the number of items you want to display in a given Collection List:

1. Select the Collection list
2. Checking the Limit items checkbox in the Settings panel (D)
3. Set the limit to value to any number between 1 and 100

Example - Other blog posts

Let’s say you want to create a section called “Other Blog posts” at the end of each blog post page, but you don’t want to feature all the blog posts. You can add a Collection list connected to the blog posts and set the limit to, for example, 4 blog posts. This will show only 4 blog posts in the list.

Here, it will be useful to use hide the current blog post like we did in example 2 above. You can also set a sort order to show only recent blog posts or to show random blog posts. Read more about sorting collection lists.

Setting the first item in a list

When you check the Limit items checkbox, you get another very useful setting option which allows you to set the first item in your list. This is useful when you want to display more than 100 items on a page. And when coupled with the limiting option, you can create a number of different layouts with Collection Lists.

Displaying more than 100 items

A Collection List can show up to 100 items at a time. If you have more than 100 items in a Collection and you wish to display them all on one page, you need to add more Collection Lists on the page and set the first item for those lists like this:

1. Duplicate your Collection List
2. Select the new list that now appears below the first list
3. Set the Start at value to 101

Example - Creating pagination

You can create pagination using Sliders and multiple Collection Lists:

1. Add a Slider element
2. Select and delete the Arrows
3. Set the background color to transparent in the Styles Panel (S)
4. Set the Slide Nav to Number labels in the Settings Panel (D)
5. Drop a Collection List into Slide 1 and connect it to a Collection
6. Create and style your Collection list
7. Optional: set a sorting order
8. Set the Limit to 3 items
9. Copy the Collection List
10. Select Slide 2 and paste the list
11. Set Start at to 4

Slide 1 will display items 1, 2, and 3. Slide 2 will display items 4, 5, and 6. If you need more pages, duplicate the slides and set the start at value for each Collection List.