Catalog Display

Renders CMS content / product grid and applies filtering, sorting, search, favorites, pagination, and more.

Last updated

August 14, 2026

How to use

Insert your Product CMS Collection List off-canvas and make sure it contains a single product card component with at least one Butter component with the Butter Data variable connected to the CMS — no extra layers, including the default 'Empty' stack.
Connect that Collection List to (L) CMS.
If you want different product cards per breakpoint, set States (1–4 tiers) and connect a Collection List per tier — (M) CMS, (S) CMS, (XS) CMS (plus Empty and Initial states, if desired). Then on each breakpoint, set Display to the tier it should use.
Optionally scope the grid with the built-in Filter: Field / Filter: Value, connecting each to the CMS for dynamic base-level filtering.
Toggle the features you use: Products, Favorites, Search, Sort, Pagination.

Note: a filter or limit set on the connected Collection List itself caps what the grid can ever show — leave them off unless that's intentional.

Responsive tiers for CMS, Empty, and Initial states

(M) CMS, (S) CMS, and (XS) CMS are additive responsive tiers — connect what you need on the primary breakpoint, then override Display for each of Framer's breakpoints so the right tier shows at each screen size.

Both pre-interaction and no-results states get the same tiering: (L) Initial (+ Tablet/Phone tiers) shows before the customer has interacted, and (L) Empty (+ Tablet/Phone tiers) shows when a search, filter, or scope returns nothing.

Scoping the grid with Filter Field and Filter Value

Use the built-in Filter: Field / Filter: Value to point one Catalog Display at a subset of your catalog — a specific collection, tag, or product type — without wiring up a full Filter Button. Property and value naming must match the conventions your CMS fields are synced under; a mismatch scopes to nothing.

This filter sets the base pool of the content visible in the Catalog Display on your page. Filter buttons reduce the scope of items further — they cannot add to the pool of items.

Use these Filter controls to recreate the effect of Shopify collection pages, scoped entirely in Framer.

Companion components connect automatically

The Products, Favorites, Search, Sort, and Pagination toggles switch each feature on for the grid. Once a feature is on, its companion components — Filter Button, Search, Sort, Pagination Button, Result Counter, Favorite Button — work with the grid automatically: place them anywhere on the page, with nothing to connect between them. The current view (active filters, search term, sort, page) is also written into the page URL, so customers can share a link to exactly what they're seeing.

GA4 view_item_list tracking

Because it owns the filtered, sorted, and paginated set on screen, Catalog Display fires GA4 view_item_list for the currently visible products — once per distinct set, with no double-counting when the page re-renders, and never on canvas/preview or without consent. Toggle this off with GA view_item_list (on by default). The list name is derived from the active view, in priority order: search term, then filter value, then Favorites, then Catalog.

On listing pages, turn each product card's Purchase Button Fire view_item off so view_item isn't double-counted against view_item_list. Card clicks (select_item) aren't tracked by this component. See Google Analytics for the full event set.

Rules for the connected collection

Filter property and value naming must follow the exact values set in the CMS, or the scoped filter silently matches nothing — the usual cause of a grid that shows zero results.

Sort defaults and Product Order

Sort's Default is Relevance — the grid's resting order before a customer picks anything from a Sort Button or Sort Dropdown. Relevance keeps the order items arrive in from the CMS, or — when Product Order is connected — follows the Shopify collection order synced onto that collection. Set Default away from Relevance to make the grid start in a specific order instead: Random, or a concrete Sort (Title, Price, Newest, Best Selling, Custom).

Product Order is a top-level control, not nested under Sort. Connect it to your Collections CMS's Product Order field and it's used whenever Default is Relevance — leave it empty on an all-products catalog, where Relevance simply means natural CMS order. See Keep your Shopify collection order in synced collections.