Collection lists are one of the two ways to add and design dynamic content from a Collection. You can add Collection Lists to any type of page. The other way to add dynamic content is with Collection Pages. This article will cover three aspects of a Collection list:

  • Adding a Collection list
  • Adding and connecting elements
  • Anatomy of a Collection list
  • Collection list settings

Adding a Collection list

As long as you have one or more Collections with items, you can add a Collection list to any page (static page or Collection page) in your project. First open the Elements Panel (shortcut: A), then drag and drop a Collection list.

 

Connect to a Collection

A Collection list is useless unless it’s connected to a Collection. Double on the Collection list to open the settings and choose the Collection you want to show in the dropdown.

 

Adding and connecting elements

Once the Collection is chosen, the Collection list will display all the items in that Collection as empty blocks. You’ll be able to add elements to the list and automatically get correct data for each Collection item.

Adding static and dynamic elements

When you drop an element into one of the empty Collection item blocks, that item will repeat for all the items in that Collection. That’s called “static” content, or content that doesn't come from a Collection.

 

Now when you connect that element to a Collection field, then it will automatically replace the content in the element with the content from each Collection item. It becomes “dynamic” content because the content is sourced from the CMS. Follow these steps to connect an element to a field:

  1. Select an element in the Collection list
  2. Click on the Settings icon next to the element label or go to the Element Settings (shortcut: D)
  3. Check Get text from Collection
  4. Open the dropdown and choose the Collection field you want to get content from
 
PRO TIP - Static elements have blue outlines and dynamic elements, or elements that have data coming from the CMS, have purple outlines on the canvas.

Styling dynamic elements

Just like how adding static elements into a Collection list will repeat those items, adding styling to any element (static or dynamic) will apply that styling across all the Collection items in that list. For example, if we connect a heading to a field and then style that heading to have a green text color, all the items in that list will have different content, but the same green style.

 

Anatomy of a Collection list

Collection List Wrapper - contains two components: the Collection List and the Empty State.

Collection List - contains the Collection items of the list.

Collection Item - contains the actual content that you add to the Collection list. Any item dropped here will populate all items in the list. These elements are static until they are connected to Collection fields or have Conditional visibility applied to them. This will convert them to dynamic elements. In the Navigator, dynamic elements are indicated with a purple icon.

Empty State - replaces the Collection list when there are no items to display for the list. By default, it has a gray background and contains a text block. You can change the styling and replace or add more elements to create a custom empty state.

Collection list settings

The Collection list has it’s own settings to control the content that gets displayed. You can also change the layout of a list in many ways. You can access the settings by selecting the Collection List Wrapper or Collection List element and going to Element Settings (shortcut: D).

Changing Collections

It’s possible to switch a Collection to another Collection, but only when none of the elements inside of the list are connected to the Collection’s fields.

PRO TIP: Any item with a dynamic connection will be represented with a purple icon in the navigator. Select each of these elements, then go to the settings panel (D) and remove all checked connections (bindings) and conditions.

UI States

This setting allows you to toggle between the Items view and the Empty state view so you can edit that state of the Collection list.

This setting doesn’t set the state of a Collection list on a live site. The actual state of a Collection list is determined by its items. The empty state only shows when there are no items in a Collection or when they are filtered out.

Layout

You can keep the list stacked vertically or you can change the layout to columns, similar to the columns element.

PRO TIP: It’s recommended to use flexbox to build equal height layouts for Collection lists. Content in each Collection item can vary and cause non-flexbox-based column layouts to misalign.

Filters

Adding a filter allows you to show only the Collection items you want—the Collection items that match one or more criteria that is dictated from the settings. Learn more on Filtering Collection Lists.

Sort order

Sort order lets you sort Collection Lists based on a specific field(s). Here are some common fields to order by:

  • Name or any other text-based field - alphabetical (A-Z) or reverse-alphabetical (Z-A) - Great for sorting plain text fields, option fields, references or any other fields that are text-based
  • Number field - sort bysmallest to largest or largest to smallest
  • Date field - sort by oldest to newest or newest to oldest
  • Switch field - either have Is ON or OFF show up first
  • Random Order - This will randomize the order of a list every 12 hours.

You can add multiple sort orders. The Collection list will be sorted first by the first sort order rule than by the second and so on. For example, a Team Member list can be sorted by a “Employee of the Month” switch field first and then can be sorted randomly after that.

Limit items

The max limit per Collection list is 100 items. This lets you limit the number of items displayed and what item to start from. For example, you can have your list start at item 5 and be limited to 3 items. That will show item 5, 6, and 7. Read more about Limiting Collection items.

PRO TIP - It’s easy to create unique layouts by creating several Collection lists and limiting them to show only the first, second and third items, all in different arrangements.