Work with Shopiframe components
Shopiframe components are prebuilt, customizable building blocks for Framer that connect directly to Shopify. They’re designed to work seamlessly with your store’s data and functionality.
Make sure your components are always up to date
Insert components
Open Shopiframe in your Framer project
Select Components
Explore components by category—All, Product, Cart, or Global—or search for a specific component
Drag a component onto the canvas, or open its details page and select Add to Canvas
Templates may include Shopiframe components that are already arranged and connected to CMS data. After changing the CMS or copying a section between projects, verify the component’s Product Data bindings.
Connect Product Data
Every Shopiframe product component includes a Product Data property. Connect this property to the Shopiframe CMS field with the same name. This field contains the serialized Shopify product data that the component uses.
Place the component inside a CMS Collection List item or on a product CMS detail page
Select the component
In the properties panel, find Product Data
Bind it to the CMS field named Product Data
Product Data is required for product cards and product-page features such as pricing, galleries, variants, quantity selection, subscriptions, inventory, and Add to Cart.
Customize components
Shopiframe components use Framer’s native customization tools, giving you 100% control over their customizations.
Depending on the component, you can customize:
Typography, labels, colors, borders, radii, spacing, and layout
Available, loading, empty, sold-out, and selected states
Connected design instances for fully custom buttons, and controls
Product behavior, including variant selection, quantity, thresholds, and market selection
Responsive layouts and visibility across breakpoints