Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Collection lists are one of the two ways to add and design dynamic content from a Collection.
Collection lists are one of two ways to add and design dynamic content from a CMS Collection or an Ecommerce Collection. You can add Collection lists to any type of page. The other way to add dynamic content is with Collection pages.
As long as you have one or more Collections with items, you can add a Collection list to any static page or Collection page in your project. You can simply drag a Collection list from the Add panel or add one from the Quick find (CMD/CTRL+E).
A collection list is useless unless it’s connected to a Collection. Double-click the Collection list to open the collection list settings and choose the Collection you want from the dropdown.
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, once you connect it to a Collection field, automatically get correct data for each Collection item.
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.
You can connect a static element to a Collection field and dynamically update the content of that element. Static elements have blue outlines while dynamic elements, or elements that have data coming from the CMS, have purple outlines on the canvas. To connect an element to a Collection field:
Learn more: How to connect each Collection field type to the relevant 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.
You can apply dynamic style settings by pulling colors and background images from color and image fields.
By default, a Collection list wrapper contains the following components: the Collection list and the Empty state. If pagination is enabled, it also contains the Pagination wrapper. You can add multiple Pagination wrappers by duplicating the wrapper.
The Collection list component contains the Collection items of the list. You cannot add other elements to this component.
The Collection item component 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.
The 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.
The pagination component contains two Link blocks: the previous button and the next button. Each of these can be styled and customized, however, you cannot add other elements to this wrapper.
Learn more: Paginating collection lists
The Collection list has its 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 pressing enter or pressing D to open the Element settings panel.
Here, you can choose which Collection you want to connect to your Collection list. You can change the Collection connected to a Collection list only when none of the elements inside of the list are connected to the currently connected Collection’s fields.
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.
You can keep the list stacked vertically or you can change the layout to columns, similar to the columns element.
You can also apply grid to the Collection list to create a dynamic grid. In that case, make sure to leave the layout setting in the Collection list settings set to "list".
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: Filtering Collection lists
Sort order lets you sort Collection lists based on a specific field(s).
Learn more: Sorting Collection lists
You can paginate Collection lists to display a specific number of items/page.
Learn more: Paginating Collection lists
This option lets you define how many items to show in a collection list and which item to start listing from. For example, you can have your list start at item 5 and show only 3 items. That will show item 5, 6, and 7.
Learn more: Limiting Collection items
Need to know
The max limits are 100 items per Collection list and 20 lists per page unless pagination is enabled. Learn how to use pagination to display more than 100 items in a Collection list.
