Utilizing collection lists in Framer
In this Framer tutorial, you will learn Utilizing collection lists in Framer. We explain a practical workflow, highlight the key settings that affect the result, and show how to apply the technique on real pages for cleaner UX and better site performance.
How do I add a collection list to a page in Framer and connect it to my CMS content?
To add a collection list to a page, open the Insert panel, go to the Collection Lists section, and drag in the collection you want to use. Any element you place inside that collection list will automatically have access to the content from that collection. To connect an element to a CMS field, select it and click the CMS icon next to the property you want to bind (like Content for text or Fill for images). Choose Set variable and pick the CMS field you want to display. The collection list will then repeat automatically, showing the correct content for each item in your collection.
How can I filter, sort, and limit the items shown in a collection list?
Select your collection list from the layers panel and go to its properties. Under content, you’ll find options for source, sorting, filters, pagination, limit to, and start offset. Sorting lets you order items by fields like date or title, or manually by dragging items in the CMS. Filters allow you to narrow down which items appear, such as showing only featured posts. Pagination breaks large lists into smaller chunks. ’Limit to’ caps the number of items shown, and ’start offset’ skips a set number of items at the beginning of the list.
How do I customize link behavior within collection list items?
In Framer, when using a collection list from the CMS, each item by default links to its corresponding detail page via the slug. If you want more granular control, you can replace or remove that default link and add individual link layers inside the list item, for example on the title or image. Then set each link to point to a CMS field such as the slug or another link field. That way you can create distinct links within the same list item that map to different actions or fields.
Lesson details
