Refine Collection Lists

Learn how to filter and limit items in Collection lists.

After you link a Collection list to a Collection, it will exhibit the initial 100 elements in that Collection. However, you can select which elements to exhibit by implementing filters. You can display more than 100 elements by allowing pagination. The ability to filter elements is accessible in Collection list settings within the Element settings panel (D).

Within this tutorial
  1. Incorporate filters to a list
  2. Erase filters
  3. Examples of filtering
  4. Show exclusively featured items
  5. Conceal current element
  6. Reveal associated content

This tutorial covers the creation of a filtered Collection list in the Designer. Real-time filtering/sorting on the live website (faceted navigation) is not yet a built-in feature. Advocate for this feature.

Incorporate filters

The filters section incorporates a plus icon to append a new filter to your collection list. The plus icon is highlighted while the rest of the filters section is dimmed.

Filters enable you to exhibit specific Collection elements in a Collection list that match whatever filter(s) you generate. You can choose from numerous filter regulations available for each Collection field type. To generate a filter:

  1. Pick the Collection list you intend to filter
  2. Proceed to the Settings panel (D)
  3. Integrate a Filter under Collection list settings by hitting the plus (+) symbol
  4. Choose the field you wish to filter by in the first dropdown
  5. Select a rule in the second field
  6. Define a value if necessary
  7. Press Save

You can include as many filters as you prefer. The filters will be amalgamated using an AND operator.

Essential to understand 
You cannot use multiple fields for the same Collection field.

Erase filters

You can remove applied filters by selecting the trash can icon next to the filter.

There are two filters currently added in the filters section. The trash can is highlighted and outlined on both filters.

Exhibit featured items solely [Filter example]

Suppose you want to solely showcase highlighted blog posts on your homepage. To achieve this:

  1. Incorporate, create, and style a “Blog Posts” Collection list
  2. Append a Filter in the Settings panel
  3. Select the “Featured” Switch field from the first dropdown
  4. Opt for is on in the second dropdown
  5. Select Save
The Add filter panel includes a Featured? is On setting. There is also a save button and x close button.

Read more:Switch field

Conceal current element [Filter example]

If you possess a blog and desire each blog post page to exhibit a list of other blog posts, you can exclude the ongoing blog post from the list utilizing a filter. To bar the present Collection element, the blog post in this instance, perform the following steps:

  1. Integrate, create, and style a “Blog Posts” Collection list
  2. Insert a Filter in the Settings panel
  3. Select the Collection name from the first dropdown
  4. Opt for is not in the second dropdown
  5. The third field will illustrate “current collection item”
  6. Select Save
The Add Filter panel includes a Blog Post is Not setting. The third field is showing "current blog post." There are also an x close button and a save button.

Read more: Collection pages

Exhibit associated content [Filter example]

Assume you wish to exhibit all the blog posts composed by an author on the Author’s page. You can use a filter to solely showcase those blog posts that reference this Author:

  1. Incorporate, 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. Opt for Equals in the second dropdown
  5. Pick “current Author” in the third one
  6. Click Save

Henceforth, each author page will exhibit a list of the blog posts that reference this author. You can restrict this list if you desire to exhibit only a particular number of related content.

The Add Filter panel includes a Author Equals Author of Current Blog Post setting in the three fields. There is also an x close button and a save button.
Read more
Ewan Mak
Latest posts by Ewan Mak (see all)