Framer CMS Collections: A Complete Guide

Framer CMS Collections are structured databases inside Framer that store repeatable content, such as blog posts, team members, case studies, or products, as individual items with shared fields. You design one layout, connect it to a Collection, and Framer generates a page or list for every item automatically, so adding content never means rebuilding pages.

Key takeaways

• A Collection is a content type with defined fields; each entry is an item that reuses the same template.
• Collection Pages give every item its own URL and SEO settings without manual page creation.
• Collection Lists pull items onto any page, with sorting, filtering, and pagination built in.
• Reference fields link Collections together, so you can connect posts to authors or products to categories.
• You can import items from a CSV, sync from external sources, or manage them through the visual editor.
• Good field planning up front saves hours of restructuring later, especially for SEO metadata.

What a Framer CMS Collection actually is

Think of a Collection as a spreadsheet that knows how to become a website. Each row is an item, and each column is a field. The difference is that Framer binds those fields to visual elements on a canvas. When you set a text layer to read from a Title field, every item renders with its own title using one shared design. This is the core idea behind any content management system, and Framer puts it directly inside the design tool instead of behind a separate admin panel.

The practical payoff is speed. A small agency site might have a Collection called Projects with 12 items today and 40 a year from now. You never touch the layout again. You add items, fill in the fields, and Framer handles the rendering, the routing, and the metadata. If you want a deeper foundation on how the whole system fits together, the complete guide to Framer CMS covers the broader architecture before you specialize into Collections.

Collections versus regular pages

A regular page in Framer is a one-off. It exists once, at one URL, and you edit it by hand. A Collection is a factory for pages. You build the design once and the system stamps out as many pages as you have items. Use regular pages for things that exist once, such as your home page, pricing, or contact. Use Collections for anything that repeats with the same shape, such as articles, listings, or profiles.

Field types and how to plan them

Field planning is where most CMS projects succeed or fail. Framer supports a focused set of field types, and choosing the right one for each piece of content keeps your data clean and your bindings predictable.

Core field types

• Plain Text for titles, names, and short labels.
• Formatted Text for the rich body of an article, with headings, lists, and links.
• Image for featured images, thumbnails, and avatars.
• Link for outbound URLs or buttons.
• Date for publish dates and event times, which you can sort by.
• Number for prices, ratings, or ordering values.
• Toggle for boolean states like Featured or Published.
• Color for per-item accent colors.
• Reference and Multi Reference for linking items across Collections.
• Option for fixed choices such as a category dropdown.

A reliable rule: add a Slug field early, add SEO Title and SEO Description fields for any Collection that becomes Collection Pages, and add a Date field if order matters. Retrofitting metadata fields onto a Collection with 50 items is tedious, so set them up before you import.

How to build a Collection step by step

Here is a clean sequence for setting up a blog Collection, which is the most common starting point. The same steps apply to projects, team members, or products.

Step 1: Create the Collection

Open the CMS panel in the left sidebar, create a new Collection, and name it something singular and clear, like Post. Framer will reference this name throughout the editor, so keep it readable.

Step 2: Define your fields

Add Title (Plain Text), Slug, Featured Image (Image), Excerpt (Plain Text), Body (Formatted Text), Author (Reference to an Authors Collection), Published Date (Date), and a Featured toggle. Add SEO Title and SEO Description fields now if you want per-item control over search snippets.

Step 3: Add a few real items

Create two or three items with real content, not placeholder text. Real content reveals layout problems that filler hides, such as long titles wrapping awkwardly or short excerpts leaving gaps.

Step 4: Design the Collection Page

Framer creates a Collection Page template automatically. Open it and bind each text and image layer to the matching field. Select a heading, choose the Title field, and it now reads from every item. Repeat for the body, image, author, and date.

Step 5: Build the Collection List

On your blog index page, drop a Collection List, point it at the Post Collection, and design a single card. That card becomes every post in the list. Add sorting by Published Date, descending, so the newest post appears first.

Step 6: Wire up navigation and SEO

Link the card to the Collection Page so clicking a card opens the full post. Set the page slug pattern, confirm your SEO fields populate the meta tags, and preview a few items to check that titles, descriptions, and images all resolve correctly.

If you are setting up a full blog rather than a generic Collection, the focused walkthrough on choosing and adapting Framer CMS templates can save you the initial design work and let you start from a proven structure.

Collection Lists: sorting, filtering, and layout

A Collection List is the component that displays multiple items. Its power lies in three controls.

Sorting

Order items by any sortable field. Most blogs sort by date, newest first. A product grid might sort by a Number field for price, or by a manual order field for editorial control.

Filtering

Show only items that match a condition. Display only Featured items on the home page, only posts in a given category on a category page, or only published items everywhere. Filtering lets one Collection feed many different views.

Layout and pagination

Collection Lists render as grids, stacks, or carousels. For long Collections, enable pagination or a load-more pattern so the page stays fast and the initial render stays light. A list of 200 items loaded all at once hurts performance, so paginate once you pass a few dozen items.

Connecting Collections with references

Reference fields are what turn a flat list into a relational content model. A Post references an Author. A Product references a Category. A Case Study references a Service. Once linked, you can display the referenced item’s fields inside the parent, and you can build pages that pull everything related together.

For example, an Author Collection Page can show a Collection List of every Post that references that author, filtered by the reference field. This creates author archive pages without any manual maintenance. The same pattern builds category pages, tag pages, and related-content sections. If you plan to push or pull this data programmatically, the Framer CMS API guide explains how to read and write Collection items from outside the editor.

Common mistakes to avoid

• Skipping the Slug field. Without clean slugs, your URLs become unpredictable and harder to share or rank.
• Designing with filler text. Real content exposes layout edge cases that placeholder copy hides.
• Forgetting SEO fields. Adding per-item SEO Title and Description after launch means editing every item by hand.
• Loading huge lists at once. Paginate long Collections to protect load times and Core Web Vitals.
• Over-nesting references. Two or three reference levels stay manageable; deeper chains get hard to reason about.
• Mixing content types in one Collection. Keep Posts, Products, and Team members in separate Collections so fields stay clean.

Real-world Collection examples

Collections become clearer with concrete patterns. Here are four common setups and how their fields and references fit together.

A blog

A Post Collection with Title, Slug, Body, Featured Image, Excerpt, Published Date, a Reference to an Author, and a Reference to a Category. The Collection Page renders each article, and a Collection List on the index shows every post sorted by date.

A portfolio or case-study library

A Project Collection with Title, Client, Cover Image, a gallery field, a Formatted Text writeup, a Reference to a Service, and a Featured toggle. The home page shows only Featured projects, while a dedicated work page lists them all.

A team directory

A Team Collection with Name, Role, Headshot, Bio, and links. A Collection List renders the grid on an About page, and each member can optionally get a Collection Page if you want individual profiles.

A product or service catalog

A Product Collection with Name, Price (Number), Image, Description, and a Reference to a Category. Sorting by price and filtering by category turns one Collection into many shoppable views without duplicate pages.

Across all four, the pattern repeats: define fields once, add items over time, and let Collection Lists and Collection Pages handle the rendering. The structure scales from a handful of items to hundreds with no layout rework.

Performance considerations

Collections are efficient, but how you use them affects load times. A Collection List that loads 200 items at once on a single page forces the browser to render all of them, which slows the first paint and hurts Core Web Vitals. Paginate long lists, use a load-more pattern, or filter to the most relevant subset so each page renders quickly.

Image handling matters just as much. Upload appropriately sized images to your Image fields and lean on Framer’s built-in image optimization rather than dropping in oversized files. A Collection of posts with heavy, unoptimized featured images will feel sluggish no matter how clean the structure is. Keeping assets light is the simplest way to keep a content-driven Framer site fast as it grows.

When to import versus build by hand

For a handful of items, type them in. For a migration of dozens or hundreds of items, import a CSV. Map each column to a field, run a test import with a few rows first, and confirm images and dates parse correctly before importing the full set. A test import catches mismatched columns before they create a cleanup job across the whole Collection.

Frequently Asked Questions

How many Collections can a Framer site have?

Framer supports multiple Collections per site, and most projects use several at once, such as Posts, Authors, Categories, and Projects. The practical limit is governed by your Framer plan and how you organize content, not by a hard small cap, so build as many distinct content types as your site genuinely needs.

Can I link two Framer Collections together?

Yes. Reference and Multi Reference fields connect one Collection to another, so a Post can reference an Author and a Product can reference a Category. Once linked, you can display the referenced item’s fields inside the parent and build archive pages that pull related items together automatically.

Do Collection items each get their own URL?

Yes. When you create a Collection Page, every item in that Collection gets its own URL based on the slug pattern you set. This is what makes Collections ideal for blogs and listings, since each post or listing becomes an individually addressable, SEO-ready page without manual page creation.

Can I import content into a Framer Collection?

Yes. Framer lets you import items from a CSV file, mapping each column to a Collection field. Run a small test import first to confirm that images, dates, and text parse correctly, then import the full set once the mapping is verified.