Sync Products with Framer CMS
Shopiframe creates and manages a Framer CMS collection containing the product content used in your design.
Create or Open Your CMS Collection
During onboarding, click Create Shopiframe CMS. Shopiframe will create the managed collection and open Products Configuration.
If the collection already exists:
Open Shopiframe
Go to Store Configuration
Click Open CMS Collection
After connecting or disconnecting a store, Shopiframe will prompt you to update the CMS collection. Click Sync Shopiframe CMS to continue.
Manage product fields
The following fields can be managed by Shopiframe:
FIELD
TYPE
PURPOSE
Title
Plain text
Shopify product title. Required.
Product Data
Plain text
ShopiFrame’s serialized product payload. Required by product-aware components.
Description
Plain text
Single-line product description with HTML removed.
Content
Formatted text
Rich product description with supported HTML content.
Featured Image
Image
Primary Shopify product image.
Gallery
Gallery
Optional gallery containing all Shopify product images.
More Image
Images
Creates separate image fields that can be bound individually.
Collection
Plain text
Comma-separated Shopify collections containing the product.
Vendor
Plain text
Shopify product vendor.
Product Type
Plain text
Merchant-defined Shopify product type.
Tags
Plain text
Comma-separated Shopify product tags.
Created At
Date
Date and time the product was created in Shopify.
Updated At
Plain text
Date and time the product was last updated in Shopify.
Toggle optional fields off if you do not need them; a smaller CMS schema is easier to work with.
Add a custom CMS field
Custom fields are managed in Framer CMS and can be edited by your team. Shopiframe preserves their values when syncing product data.
Click Add custom field
Name the field
Select a field type: Plain Text, Formatted Text, Date, Link, Image, Number, or Toggle
Click Sync Products
Use custom fields for content that is not stored in Shopify, such as editorial labels, campaign images, long-form descriptions, or featured-product toggles.
To remove a custom field, right-click it and select Remove. Removing a CMS field also delete its stored values, before removing it, make sure the content is no longer needed.
Add a Shopify Metafield
Use product metafields to sync structured product data that is already stored in Shopify.
From Shopify Admin, open Settings → Metafields and metaobjects → Products
Select Add definition and configure your new metafield
Open the metafield definition and copy its
namespace.keyvalue—for examplecustom.materialIn Shopiframe Configuration, scroll down and select Add Metafield
Paste the identifier, then click Sync Products
Shopiframe automatically assigns supported metafield values to compatible Framer CMS field types. Metafields with empty or unsupported values may not sync correctly.
Connect CMS fields to your Design
Use standard Framer CMS bindings for content fields such as Title, Description, Content, Featured Image, Collection, Vendor, Product Type, Tags, and custom fields.
For Shopiframe product components, make sure you connect the Product Data field:
Place the component inside a CMS Collection List item or on a product detail page
Select the Shopiframe component
Find Product Data in the properties panel
Bind this property to the CMS Product Data field
If the Shopiframe component is nested, expose the property and pass the value through each component layer until it reaches the Shopiframe component
Troubleshoot
If Shopiframe displays “No products found for Storefront”:
Open a product page in Shopify Admin
Find Publishing in the sidebar and click the icon to open its settings
Expand Headless dropdown and enable your storefront
Save your changes, then repeat these steps for each product or use Shopify’s bulk editor
Return to Framer CMS and click Sync in the top bar
Shopiframe can connect successfully even when no products are published to the Headless storefront. However, the CMS sync will not return any products until they are made available.