Back to Framer CMS

Make CMS lists useful.

Framer CMS lists become useful when visitors can narrow content by a meaningful property and scan results in a predictable order. Keep filters explicit and make empty states clear.

Framer CMS · 8 min read · Updated 2026-06-06

Start with one useful filter

Choose the property that reflects the visitor's decision, such as category, location or content type. Avoid adding controls for fields that users do not understand.

  1. Add a category or status field with controlled values rather than free-form spelling.
  2. Connect the collection list and set the default sort, normally newest first or a deliberate editorial order.
  3. Add the filter UI and confirm it changes the visible records without changing the page context.
  4. Design an empty state for a filter with no matching results.
  5. For large collections, add pagination or load-more behavior and preserve the selected filter.

Search and pagination considerations

Search should match the fields visitors expect, usually title and summary. Pagination needs stable ordering; sort by a date plus a secondary stable field so records do not jump between pages.

  • Show the active filter in the interface.
  • Keep filter labels short and comprehensible.
  • Do not hide the only route to the full collection.
  • Check the mobile control does not become a horizontal overflow source.

Rollout sequence for a new filter

Follow the sequence below from start to finish. The order matters: later steps assume the earlier ones are done.

  1. Add the controlled option field to the collection and set values on existing records.
  2. Build the filter control against a duplicate or staging version of the page.
  3. Test with zero results, one result and a full page of results.
  4. Confirm the filter state survives a page refresh if that behaviour is expected.
  5. Publish, then check the live filter against real traffic-facing URLs.

Signs a listing needs pagination

This comes down to a handful of concrete details. Work through the list below and flag the ones you have not covered yet.

  • The page takes longer to load as the collection grows.
  • Visitors scroll through many records to find recent ones.
  • The list pushes the footer far below the fold on longer collections.
  • Editors add new records faster than visitors reach the bottom of the list.

Questions

There is no fixed number, but once a list regularly shows more than twenty or thirty records, or noticeably slows the page, pagination or a load-more control keeps performance and usability manageable.

An option or reference field with controlled values. Free text filters break as soon as an editor spells or capitalises a value differently, splitting what should be one filter group into several.

Show a clear empty state explaining that no items match, with an easy way to clear the filter, rather than leaving a blank space that looks like a broken page.

Outgrowing Framer?

We rebuild Framer sites as fast, custom-coded ones and protect your rankings through the move.

See the service

Related guides

Framer CMS field types explained

The useful Framer CMS field types are the ones that match how content is authored and queried. Text, rich text, images, dates, links, booleans and references each solve a different problem.

Framer reference and Multi-Reference fields

Reference fields connect one CMS record to another, while multi-reference fields connect one record to many. They are useful for authors, categories, services, related projects and reusable taxonomies.

Framer breakpoints and responsive design problems

Responsive Framer bugs usually come from a fixed width, an inherited stack setting or a one-size breakpoint override. How to find and fix them.