Product component reference
Product components read one Shopify product from the Shopiframe CMS and share the shopper’s current variant, option, quantity, and selling-plan selection.
Required setup
For every product code component on a CMS page or inside a Collection List:
Select the component in Framer.
Find its Product Data property.
Bind Product Data to the Shopiframe CMS Product Data field.
Pass that value through each parent design component when the Shopiframe component is nested.
The built-in sample product can appear on the canvas when Product Data is not connected. Always verify the real CMS item in Preview and on the published site.
Use this page when you need detailed behavior or property information. For a guided setup, start with Build your storefront.
The tables list Shopiframe controls. Standard Framer layout controls are not repeated.
Product Card
A detachable Framer design component for collection grids. Its design properties are intended to be connected directly to the matching CMS fields.
Property
What it controls
title
Product title text. Connect to CMS Title.
featuredImage
Product image. Connect to CMS Featured Image or another enabled image field.
productID
Product payload passed to the nested Shopiframe component. Connect to CMS Product Data.
After inserting the card, edit its component design to change the layout, typography, image treatment, and nested components.
Price
Displays the selected variant’s live price. Before a variant is selected, it can display the product’s starting price. When the product is unavailable, it can show a sold-out label.
Property
What it controls
Start from Label
Prefix used when the product has multiple prices. Default: Start from.
Sold out Label
Text shown for an unavailable product. Default: Sold out.
Layout
Direction, wrapping, alignment, distribution, and gap between price elements.
Price
Visibility, typography, color, background, border, radius, and shadow of the active price.
Compare Price
Visibility, typography, decoration, color, background, border, radius, and shadow of the compare-at price.
Sold Out
Visibility, line-through option, typography, background, border, padding, radius, and shadow of the sold-out label.
Reverse Currency
Reverses the formatted currency and amount order.
Add to Cart
Adds the selected variant, quantity, selling plan, and any page inputs named product-* to the shared cart. It disables on the published site when the selected product is unavailable or an add request is running.
Property
What it controls
Type
Uses the built-in button or a connected custom button component.
Button Component
Custom Framer button instance used when Type is Custom.
Component Variants
Names of the custom button’s Default, Loading, and Disabled variants.
Label
Built-in button text. Default: Add to cart.
Style
Built-in button typography, color, background, border, radius, and padding.
Hover
Built-in button hover color, background, and border.
Left Icon / Right Icon
Optional preset or custom image icon, including its size, gap, and color.
Loading Animation
Enable, canvas preview, label, text style, spinner size, and overlay background.
Added To Cart Animation
Enable, canvas preview, label, Pop/Slide/Fade entrance, visible duration, text style, icon size, and background.
Error Style
Typography, color, spacing, and text transform for cart errors.
Open Cart Event
Framer interaction fired after a successful add. Connect it to a cart overlay or another action.
If the success animation is enabled, Open Cart Event fires after a short delay so the success state remains visible. If the animation is disabled, the event fires immediately after a successful add.
Variant Selector
Renders the product’s option groups and values, updates the selected variant shared by other product components, and hides when the product has no meaningful variants.
Property
What it controls
Wrapper
Group gap, label gap, values gap, row/column direction, and alignment.
Label
Option-group label visibility and typography.
Variant
Value typography, alignment, background, border, radius, shadow, gap, and padding.
Selected
Selected-value color, background, border, and shadow.
Hover
Hover color, background, border, and shadow.
Color Swatches
Shows a swatch beside each option value.
Color swatch style
Radius, size, border, fallback color, and mappings from Shopify option names to exact colors. Visible when Color Swatches is enabled.
Unavailable
Hides unavailable values when enabled; otherwise they remain visible.
Unavailable Opacity
Opacity of visible unavailable values.
Tap Scale
Pressed-state scale feedback.
Option Selector
Renders product options as buttons or a dropdown and updates the shared selected option. It hides when the product has no options.
Property
What it controls
Type
Button or Dropdown presentation.
Price
Shows or hides prices beside button options.
Wrapper
Button layout gap, direction, wrapping, and alignment.
Option
Button sizing, typography, background, border, radius, shadow, gap, padding, and nested price style.
Selected
Selected button text/price colors, background, border, and shadow.
Hover
Hover text color, background, border, and shadow.
Tap Scale
Button press feedback.
Placeholder
Dropdown placeholder. Default: Select an option.
Dropdown
Dropdown sizing, typography, background, border, radius, shadow, and padding.
Dropdown Icon
Icon visibility, size, color, and right inset.
Button-only controls are hidden in Dropdown mode, and dropdown-only controls are hidden in Button mode.
Custom Variant Selector
Builds a selector from buttons, product images, or color swatches. Use it when the standard Variant Selector does not match the desired storefront design.
Property
What it controls
Filter
Shows all option groups, only the group whose title matches, or every group except that title. Matching is exact, such as Color or Size.
Type
Button, Image, or Color option values.
Image
Image fit and X/Y focal point for Image mode.
Color Mapping
Maps Shopify option names such as Ocean Blue to exact colors in Color mode.
Styles
Item width, height, gap, wrapping, radius, background, and border.
Selected
Selected text color, background, border, and shadow.
Separator
Separator visibility, color, width, height, and margin.
Unavailable
Chooses Disable, Selectable, or Hide, plus opacity when visible.
Labels
Value-label visibility/typography/background/radius and group-label visibility/typography. Auto shows value text for Button and hides it for Image and Color.
Interaction
Tap-scale feedback.
Quantity Selector
Updates the quantity shared with Add to Cart.
Property
What it controls
Type
Grouped counter or Separate minus, quantity, and plus elements.
Style
Grouped typography, gap, colors, background, border, radius, padding, and icon size/color.
Layout
Gap between separate counter elements.
Buttons
Separate button background, border, radius, size, and icon size/color.
Quantity
Separate quantity typography, color, background, border, radius, and padding.
Limit to Stock
Prevents the quantity from exceeding known available stock. Default: Yes.
Image Gallery
Displays Shopify product media and changes to the selected variant’s image when one is available.
Property
What it controls
Direction
Row, Column, Row Reverse, or Column Reverse layout for the main media and thumbnails.
Gap
Space between the main media and thumbnails.
Main Image
Background, border, radius, aspect ratio, fit, and position.
Thumbs
Shows or hides thumbnails.
Thumbnails
Size, gap, radius, background, border, active border, fit, position, and aspect ratio.
Enable Zoom
Enables zoom on the main image.
Zoom Level
Zoom factor from 1.1 to 4. Visible when zoom is enabled.
Autoplay
Autoplays product video.
Controls
Shows product-video player controls.
Sale / Sold out
Shows an On Sale badge when compare-at price differs from the active price, or a Sold Out badge when the product or selected variant is unavailable. Otherwise it hides.
Property
What it controls
Preview
Canvas-only Current, On Sale, or Sold Out state. Preview and published sites use live data.
Sale Label
On-sale text. Default: On Sale.
Sold out Label
Sold-out text. Default: Sold out.
On Sale
Typography, background, border, padding, radius, and shadow.
Sold Out
Typography, background, padding, border, radius, shadow, and opacity.
Icon
None, Preset, or custom Image.
Icon Preset
Dot, Percent, Dollar, Tag, Flame, Star, Heart, Lightning, or Check.
Icon Image
Custom image used in Image mode.
Icon Settings
Before/after position, size, gap, and color.
Stock Count
Shows live inventory when Shopify supplies a numeric stock value, switches to an out-of-stock state when unavailable, and can hide high inventory counts.
Property
What it controls
Preview
Canvas-only Current, In Stock, or Out of Stock state.
In Stock
Visibility, text, typography, background, border, padding, and radius. Use ## in the text to insert quantity.
Out of Stock
Visibility, text, typography, background, border, padding, and radius.
Hide If >
Hides the live in-stock message when inventory exceeds this number. Default: 7.
Subscription
Shows one-time purchase and Shopify selling-plan choices, then shares the selected selling plan with Add to Cart. It only renders plans returned for the product.
Before use, enable Selling plans (Subscription) in Store Configuration, grant the required Shopify Headless permission, and sync a product that has selling plans.
Property
What it controls
Wrapper
Background, border, radius, shadow, plan padding, group/item gaps, and overflow.
One-time Purchase
Label, visibility, row padding, and outer padding.
Divider
Visibility, color, thickness, and margin.
Group Name
Visibility, bottom spacing, color, and font.
Plan Item
Background, border, radius, padding, content gap, tap scale, title style, selected style, and hover style.
Checkbox
Size, background, border, radius, shadow, selected style, and inner-mark color/radius/scale/duration.
Shop Pay Button
Loads Shopify’s Shop Pay web component and starts checkout for the selected variant, falling back to the product’s first variant when none has been selected.
Its only Shopiframe setup property is Product Data. Shopify controls the button’s rendered checkout UI. The button remains hidden until Shopify’s Shop Pay script has loaded.
Test the product flow
Use the test and publish checklist to verify variants, availability, quantity, subscriptions, cart behavior, and checkout.