Prerequisites

A synced Shopiframe Products collection, product images, and a product detail page. For collection browsing, products should belong to Shopify collections.

1. Choose the grid fields

Open the managed CMS through Store Configuration → Open CMS Collection. Enable Featured Image and Collection if your browse layout uses them. The Collection field is comma-separated Shopify collection names, not a separate linked collection database.

2. Create a CMS Collection List

Use the Shopiframe Products collection as the list source. Design one repeated item and let Framer repeat it. Do not manually duplicate a product card for every Shopify product.

3. Bind the card content

Insert Product Card or your own card design. Bind Title and FeaturedImage to the corresponding CMS fields. Connect Product Data to the card’s product-aware features, including nested price components.

4. Create collection views

Use Framer CMS list filtering with the synced Collection field to make relevant browse sections or pages. Inspect the actual comma-separated values before choosing a filter. Do not assume Shopiframe creates a separate category-navigation system.

5. Link and adapt the grid

Link each repeated card to its matching product CMS detail page. Use a grid on desktop and a comfortable single column on phone. Test long titles, varied image shapes, and lists with only one matching product.

Check your work

Open several cards and confirm each goes to the correct product. Compare a collection view with Shopify membership, and verify that each repeated price belongs to its own CMS item.

Troubleshooting

Missing collection values usually require enabling the field and syncing again. Empty product lists can mean products are not published to the Headless storefront. For stale card content, check source fields and bindings before rebuilding the card.

Resources

Sync Products with Framer CMS