Work with Shopiframe components
Shopiframe components are Shopify-connected building blocks for Framer. Product components render product behavior, cart components share a live cart, and global components handle storefront-wide features such as Shopify Markets.
Insert a component
Open Shopiframe in your Framer project.
Select Components.
Browse All, Product, Cart, or Global, or search by name.
Drag a component onto the canvas, or open its detail page and click Add to Canvas.
If Framer will not insert the component, confirm that you have permission to add component instances or detached component layers to the project.
Templates can include Shopiframe components that are already arranged and connected to CMS data. Always verify their Product Data bindings after changing the CMS or copying a section between projects.
Connect Product Data
Every Shopiframe product code component exposes a Product Data property. Connect it to the Shopiframe CMS field with the same name. That field contains the serialized Shopify product payload the component reads.
Put the component inside a CMS Collection List item or product CMS detail page.
Select the component.
Find Product Data in the properties panel.
Connect it to the Shopiframe CMS field named Product Data.
Product Data is required for product cards and product-page behavior such as price, gallery, variants, quantity, subscriptions, stock, Shop Pay, and Add to Cart. Cart and global components do not need Product Data.
Connect nested components
When a Shopiframe component is nested inside one or more design components, pass Product Data through every level:
Expose a Product Data variable on the outer design component.
Connect it to the Product Data property of the nested Shopiframe component, or to the Product Data variable of the next design-component level.
Continue until the value reaches the Shopiframe component.
On the CMS page or collection item, bind the outermost Product Data variable to the CMS Product Data field.
If one link in the chain is missing, the innermost component will not receive product data.
Customize components
Shopiframe components are built for native Framer customization. Depending on the component, you can control:
Typography, labels, colors, borders, radii, spacing, and layout.
Available, loading, empty, sold-out, and selected states.
Connected design instances for fully custom buttons, cards, and controls.
Product behavior such as variant selection, quantity, thresholds, or market choice.
Responsive layouts and visibility across breakpoints.
Keep functional Shopiframe layers intact while changing their visual presentation. If you detach or replace a functional code component with a static layer, Shopify behavior will no longer run.
Update components
Shopiframe may block the end of onboarding when outdated component types are detected.
Open Framer’s Assets tab.
Open the Shopiframe folder.
Update every Shopiframe component marked as outdated.
Return to the plugin and click I’ve updated them or Check Again.
Update all Shopiframe components in a project together. Mixing versions can cause inconsistent shared state or controls.
Verify the result
The Framer canvas is a design environment and may not execute every live Shopify interaction. Use Framer Preview and the published site to verify:
Products load for the correct CMS item.
Variant selection updates price, image, availability, and stock.
Quantity and Add to Cart work together.
Cart count, list, subtotal, and checkout stay in sync.
Market selection updates country and currency.
Empty, loading, sale, and sold-out states look correct.
Mobile and desktop layouts both work.
Use the complete test and publish checklist before launch.