Collection list
Use Collection lists to add dynamic content to any page on your site.
Collection lists let you add and design dynamic content from a CMS or Ecommerce Collection to any page on your site.
How to add and connect a Collection list
As long as you have one or more Collections containing Collection items, you can add a Collection list to any static or Collection page on your site. You can add a Collection list to the canvas from Add panel > Elements > CMS.
Then, to connect the Collection list to a Collection:
- Double-click the Collection list on the canvas to open Collection list settings
- Click Source and choose the Collection you want to connect
Note: Collection item names won’t show up on the Collection list item tags until you open the Collection in the CMS panel.
The anatomy of a Collection list
The following parts comprise a Collection list:
Collection list wrapper
The Collection list wrapper contains the Collection list and the empty state. If pagination is enabled, it also contains the pagination wrapper. You can duplicate the wrapper to add multiple pagination wrappers.
Collection list
The Collection list contains the Collection item. You can’t add other elements inside the Collection list.
Collection item
The Collection item contains any elements you add to the Collection list. All elements you add to the Collection item will populate to all items in the Collection list. Elements inside the Collection item are static (i.e., unchanging) until you connect them to Collection fields or apply conditional visibility to them, at which point they become dynamic elements. Dynamic elements are indicated with a purple icon in the Navigator panel.
Note: You can update text-based dynamic elements within Collection lists on the Designer canvas. Learn more about editing Collection items on the canvas.
Empty state
The empty state replaces the Collection list when there are no items in the list to display. By default, the empty state has a gray background and contains a text block that reads, “No items found.” You can replace or add more elements and styles to customize the empty state.
Pagination
The pagination element contains two link blocks: the previous button and the next button. Each button can be styled and customized. Learn more about paginating Collection lists.
How to design a Collection list
Once you connect a Collection to your Collection list, the Collection list displays all items in that Collection as empty blocks. Any elements you add to the Collection list are static (i.e., unchanging) and duplicate in each Collection item until you connect them to a Collection field. When you connect an element to a Collection field, it automatically replaces the element’s default content with the content from each Collection item. Elements connected to Collection fields are dynamic because they source their content from the CMS Collection.
Connect elements to Collection fields
To dynamically update the content of an element, you’ll need to connect it to a Collection field:
- Add an element to your Collection list
- Select the element on the canvas or in the Navigator panel
- Go to Element settings
- Click the purple “dot” icon
- Choose the Collection field you want to connect to the element (i.e., the field you want to get content from)
Note: You can update text-based dynamic elements within Collection lists on the Designer canvas. Learn more about editing Collection items on the canvas.
Disconnect elements from Collection fields
If you want to disconnect an element from a Collection field, you can:
- Select the element on the canvas or in the Navigator panel
- Go to Element settings
- Click the name of the Collection field you want to disconnect
- Click Disconnect property
Style dynamic elements
When you style any element in a Collection list, regardless of whether the element is static or dynamic, all Collection items in the Collection list inherit that style. For example, if you connect a paragraph to a Collection field and change its font size, all the paragraphs in that Collection list will have the same font size.
You can also apply dynamic style settings to a Collection list by connecting color and background images from color and image Collection fields. To apply dynamic style settings:
- Select the element to which you want to add dynamic styles
- Go to Element settings > Dynamic style settings
- Check the checkbox for the style you want to add (e.g., “Get text color from…”)
- Choose the Collection field (i.e., the color or image field) you want to pull styles from
How to configure Collection list settings
In Element settings > Collection list settings, you can control the Collection list’s layout and the content it displays. There, you can manage the following settings:
Source
The Source dropdown lets you choose which Collection you want to connect to your Collection list. To change the connected Collection, disconnect any elements inside the Collection list that are connected to Collection fields.
UI state
The UI state setting lets you toggle between the items state and the empty state so you can style both states of the Collection list.
Changing this setting doesn’t set the state of the Collection list on the live site — the state of a Collection list is determined by its items. The empty state only shows on the live site when there are no items in a Collection or when the items are filtered out.
Layout
With the Layout setting, you can change the Collection list layout to columns. If you want to style your Collection list in flexbox or grid format, leave the Collection list’s Layout setting to full width. Otherwise, gaps form on the sides of the parent element, not just between the elements inside.
Pro tip: We recommend using flexbox to build equal height layouts for Collection lists. Content in each Collection item can vary and cause non-flexbox-based layouts to misalign.
Filters
Filters let you show only the Collection items you want in your Collection list — the items that match one or more filter criteria. Learn more about filtering Collection lists.
Sort order
The Sort order setting lets you sort Collection lists based on a specific field(s). Learn more about sorting Collection lists.
Display limits
Paginate items
When checked, Paginate items allows you to display a specific number of Collection items per page. Learn more about paginating Collection lists.
Limit items
When checked, Limit items lets you define how many items to display in a Collection list and which Collection item starts the list. For example, you can make your Collection list start at item 5 and show only 3 items. Then, your list would show items 5, 6, and 7. Learn more about limiting Collection items.
Note: There’s a max limit of 100 items per Collection list and 20 Collection lists per page unless pagination is enabled. Learn how to use pagination to display more than 100 items in a Collection list.
How to use components in Collection lists
You can add or create a component inside a Collection list item. Then, connect Collection fields to component properties and use dynamic data in your components. Learn more about using components in Collection lists.