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.