Sync products to the Framer CMS
Shopiframe creates a managed Framer CMS collection for product content used in your design. Prices, variants, inventory, markets, cart state, and checkout remain live in Shopify.
Create or open the collection
During onboarding, click Create Shopiframe CMS. Shopiframe creates the managed collection and opens Products Configuration.
For an existing collection:
Open Shopiframe.
Go to Store Configuration.
Click Open CMS Collection or Sync CMS Collection.
You can also open Framer’s CMS first and launch Shopiframe from the collection workflow.
Choose 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.
Title and Product Data cannot be disabled. Toggle optional fields off if you do not need them; a smaller CMS schema is easier to work with.
Do not edit Product Data manually. It contains the data contract used by Shopiframe components. Change product information in Shopify and sync instead.
Add a custom Framer field
Custom fields belong to the Framer CMS and are editable by your team. Shopiframe preserves their values when product data is synced.
Click Add custom field.
Rename the field.
Choose its type: Plain Text, Formatted Text, Date, Link, Image, Number, or Toggle.
Leave the field enabled and click Sync Products.
Use custom fields for presentation content that does not live in Shopify—for example an editorial label, campaign image, long-form story, or featured toggle.
To remove a custom field from the configuration, open its context menu and choose Remove. Removing a CMS field can also remove the values stored in that field, so confirm that the content is no longer needed first.
Import a Shopify metafield
Use product metafields for structured product data that already lives in Shopify.
Make sure the metafield definition exists for products in Shopify.
In Products Configuration, click Add metafield.
Enter the identifier in
namespace.keyformat—for examplecustom.material.Repeat for any additional metafields.
Click Sync Products.
Shopiframe maps supported Shopify metafield values to a compatible Framer CMS field type. Empty or unsupported values may not appear as expected. If you rename a metafield in Shopify, update the identifier in Shopiframe and sync again.
Custom fields and Shopify metafields solve different problems:
Custom fields are authored in Framer and preserved by Shopiframe sync.
Metafields are authored in Shopify and refreshed by Shopiframe sync.
Sync products
Click Sync Products after selecting fields. Shopiframe will:
Create or update the collection schema.
Fetch products available to the configured Shopify storefront.
Create, update, and remove managed product entries as needed.
Preserve enabled custom Framer fields where possible.
Record the active store and sync version so outdated collections can be detected.
Sync again whenever you change static catalog content in Shopify, including titles, descriptions, gallery images, tags, vendors, types, collections, or imported metafields.
Prices, availability, variants, inventory, cart state, markets, and checkout behavior are handled live by Shopiframe components. They should not be treated as manually maintained CMS values.
If no products are found
If Shopiframe reports No products found for Storefront:
Open Shopify Admin.
Open Headless and select the connected storefront.
Open Sales channels and add Storefront.
Publish products to that storefront.
Return to Framer and click Try Sync Again.
Connect CMS fields to the design
Use normal Framer CMS bindings for static fields such as Title, Description, Content, Featured Image, Collection, Vendor, Product Type, Tags, and custom fields.
For Shopiframe product components, the most important connection is Product Data:
Place the component inside a CMS Collection List item or on the product CMS detail page.
Select the Shopiframe component.
Find its Product Data property in the properties panel.
Click the variable/connect control.
Choose the Shopiframe CMS Product Data field.
If the component is nested, expose and pass the value through every component level until it reaches the Shopiframe component.
Keep the sources of truth clear
Treat Shopify as the source of truth for commerce data. Treat Framer as the source of truth for layout and presentation-only CMS content. This split prevents editors from accidentally creating mismatches between the visible storefront and Shopify checkout.