Product Components Reference
Each product component displays one Shopify product using the Shopiframe CMS Product Data field.
Required setup
For every product component placed on a CMS page or inside a Collection List:
Select the component in Framer
Find Product Data in the properties panel
Bind Product Data to the Shopiframe CMS Product Data field
When Product Data is not connected, Framer display a built-in sample product on the canvas. Always verify the actual CMS item on the published site.
Product Card
The Product Card component is a Framer component used to display product cards, featuring our plugin’s price component.
You can easily customize its design and layout.
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.
After inserting the card, edit its component design to change the layout, typography, image treatment, and nested components.
Price
Price component displays the price of products. When there are multiple prices for a product, the ‘Start from’ option appears, which you can also remove it.
On the product page, the price automatically updates when a variant is selected.
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 product inputs to the live shopping cart.
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
Displays available product variants and manages their selection states. Automatically hides when the product has no 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 manages their selection states. Automatically hides when the product has no variants.
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
Build a fully custom variant selector with your own designs—images, color swatches, or any layout you want for each option. 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
Input that lets users select a product quantity while enforcing inventory limits.
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
Display product images dynamically from Shopify. This component is highly customizable; you can also adjust the position of thumbnails. It automatically changes to the variant image if the product has variants with images.
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
Badge component displays the product status. If there are multiple prices, it displays ‘On Sale,’
and if out of stock,it shows ‘Sold Out’ .
Selecting a variant on the product page will update the badge accordingly.
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
Display the stock count of the product, with the option to set a condition to hide it when the stock exceeds a specified threshold.
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
Displays one-time purchase and Shopify selling plan options, then passes the selected plan to Add to Cart. Compatible with Shopify selling plan apps such as Seal Subscriptions.
Before use, enable Selling plans (Subscription) in Store Configuration, grant the required Shopify Headless permission, and sync the CMS.
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
A one-click Buy Now button that sends customers directly to Shopify Checkout without adding to the cart.