Product components
Explore our product-related Framer components that connect your site to Shopify.
Components in this doc:
Loading…
Out of Stock
Select Size
Add to cart
Buy now
Quick add
$150
Add to cart
Buy now
Quick add
$150
Add to cart
Buy now
Quick add
$150
Purchase Button
Handles Add to Cart and Buy Now functionality with state management for product availability and variant selection. Updates dynamically based on product status and variant selection.
Controls
ProductID
Connect to CMS variable (required)
VariantID
Populate with specific variant ID (optional)
Instance
Connect button states: Available, Out of Stock, Loading, Select Variant
Type
Select Add to Cart or Buy Now functionality
Tips
Debugging
If your button isn't working, make sure your shopifyProductID is set. If your product has variants, the variant selector is required on the page unless you have manually set the variantID.
Purchase Button
Handles Add to Cart and Buy Now functionality with state management for product availability and variant selection. Updates dynamically based on product status and variant selection.
Controls
ProductID
Connect to CMS variable (required)
VariantID
Populate with specific variant ID (optional)
Instance
Connect button states: Available, Out of Stock, Loading, Select Variant
Type
Select Add to Cart or Buy Now functionality
Tips
Debugging
If your button isn't working, make sure your shopifyProductID is set. If your product has variants, the variant selector is required on the page unless you have manually set the variantID.
Purchase Button
Handles Add to Cart and Buy Now functionality with state management for product availability and variant selection. Updates dynamically based on product status and variant selection.
Controls
ProductID
Connect to CMS variable (required)
VariantID
Populate with specific variant ID (optional)
Instance
Connect button states: Available, Out of Stock, Loading, Select Variant
Type
Select Add to Cart or Buy Now functionality
Tips
Debugging
If your button isn't working, make sure your shopifyProductID is set. If your product has variants, the variant selector is required on the page unless you have manually set the variantID.
$200
Price
Handles standard and sale price displays. Updates dynamically with variant selections.
Controls
ProductID
Connect to CMS variable (required)
Text
Configure Regular Price and Sale Price appearance
Currency
Toggle currency code and symbol visibility
Tips
When to use
This component is only needed for dynamic pricing, such as when using the variant selector or supporting multiple currencies. Otherwise, you can use the Price fields from the CMS.
Price
Handles standard and sale price displays. Updates dynamically with variant selections.
Controls
ProductID
Connect to CMS variable (required)
Text
Configure Regular Price and Sale Price appearance
Currency
Toggle currency code and symbol visibility
Tips
When to use
This component is only needed for dynamic pricing, such as when using the variant selector or supporting multiple currencies. Otherwise, you can use the Price fields from the CMS.
Price
Handles standard and sale price displays. Updates dynamically with variant selections.
Controls
ProductID
Connect to CMS variable (required)
Text
Configure Regular Price and Sale Price appearance
Currency
Toggle currency code and symbol visibility
Tips
When to use
This component is only needed for dynamic pricing, such as when using the variant selector or supporting multiple currencies. Otherwise, you can use the Price fields from the CMS.
$200
$120
Price Compare
Displays Shopify Compare-at Price values. Auto-hides when no compare-at price exists.
Controls
ProductID
Connect to CMS variable (required)
Text
Configure Compare-at Price appearance and strikethrough
Currency
Toggle currency code and symbol visibility
Tips
When to use
This component is only needed for dynamic pricing, such as when using the variant selector or supporting multiple currencies. Otherwise, you can use the Price fields from the CMS.
Price Compare
Displays Shopify Compare-at Price values. Auto-hides when no compare-at price exists.
Controls
ProductID
Connect to CMS variable (required)
Text
Configure Compare-at Price appearance and strikethrough
Currency
Toggle currency code and symbol visibility
Tips
When to use
This component is only needed for dynamic pricing, such as when using the variant selector or supporting multiple currencies. Otherwise, you can use the Price fields from the CMS.
Price Compare
Displays Shopify Compare-at Price values. Auto-hides when no compare-at price exists.
Controls
ProductID
Connect to CMS variable (required)
Text
Configure Compare-at Price appearance and strikethrough
Currency
Toggle currency code and symbol visibility
Tips
When to use
This component is only needed for dynamic pricing, such as when using the variant selector or supporting multiple currencies. Otherwise, you can use the Price fields from the CMS.
20% off
Price Discount
Calculates and displays percentage-based discounts. Auto-hides when no discount applies.
Controls
ProductID
Connect to CMS variable (required)
Text
Configure message and appearance
Style
Configure background and sizing
Price Discount
Calculates and displays percentage-based discounts. Auto-hides when no discount applies.
Controls
ProductID
Connect to CMS variable (required)
Text
Configure message and appearance
Style
Configure background and sizing
Price Discount
Calculates and displays percentage-based discounts. Auto-hides when no discount applies.
Controls
ProductID
Connect to CMS variable (required)
Text
Configure message and appearance
Style
Configure background and sizing
Variant Selector
Renders and manages available product variants with selection states. Auto-hides when product has no variants.
Controls
productID
Connect to CMS variable (required)
Image IDs
Connect to "Image Variant IDs" CMS variable (optional, if you want to trigger image changes)
Style
Choose between Buttons or a Dropdown
Styles
Customize all prop styles
Images / Type
Choose between None, Gallery, or Scroll Sections to control image triggers
Images / Two-Way
Enable if you want to enable clicking on an image to change the active variant in the selector
Tips
Customization
This component creates an array of variants and is great for scaling large stores. If you want to learn how to manually create a more customizable variant selector, visit our Academy (coming soon).
Variant Selector
Renders and manages available product variants with selection states. Auto-hides when product has no variants.
Controls
productID
Connect to CMS variable (required)
Image IDs
Connect to "Image Variant IDs" CMS variable (optional, if you want to trigger image changes)
Style
Choose between Buttons or a Dropdown
Styles
Customize all prop styles
Images / Type
Choose between None, Gallery, or Scroll Sections to control image triggers
Images / Two-Way
Enable if you want to enable clicking on an image to change the active variant in the selector
Tips
Customization
This component creates an array of variants and is great for scaling large stores. If you want to learn how to manually create a more customizable variant selector, visit our Academy (coming soon).
Variant Selector
Renders and manages available product variants with selection states. Auto-hides when product has no variants.
Controls
productID
Connect to CMS variable (required)
Image IDs
Connect to "Image Variant IDs" CMS variable (optional, if you want to trigger image changes)
Style
Choose between Buttons or a Dropdown
Styles
Customize all prop styles
Images / Type
Choose between None, Gallery, or Scroll Sections to control image triggers
Images / Two-Way
Enable if you want to enable clicking on an image to change the active variant in the selector
Tips
Customization
This component creates an array of variants and is great for scaling large stores. If you want to learn how to manually create a more customizable variant selector, visit our Academy (coming soon).
Select Size
Variant Status
Displays variant selection requirements and validation states. Can be standalone or nested within Purchase Button.
Controls
ProductID
Connect to CMS variable (required)
Text
Configure message and appearance
Variant Status
Displays variant selection requirements and validation states. Can be standalone or nested within Purchase Button.
Controls
ProductID
Connect to CMS variable (required)
Text
Configure message and appearance
Variant Status
Displays variant selection requirements and validation states. Can be standalone or nested within Purchase Button.
Controls
ProductID
Connect to CMS variable (required)
Text
Configure message and appearance
1
Quantity Selector
Input component for product quantity selection with built-in inventory limit validation. Provides increment/decrement controls with dynamic maximum values.
Controls
ProductID
Connect to CMS variable (required)
Instance
Connect button states: Plus/Minus, Active/Disabled
Style
Configure quantity text appearance
Quantity Selector
Input component for product quantity selection with built-in inventory limit validation. Provides increment/decrement controls with dynamic maximum values.
Controls
ProductID
Connect to CMS variable (required)
Instance
Connect button states: Plus/Minus, Active/Disabled
Style
Configure quantity text appearance
Quantity Selector
Input component for product quantity selection with built-in inventory limit validation. Provides increment/decrement controls with dynamic maximum values.
Controls
ProductID
Connect to CMS variable (required)
Instance
Connect button states: Plus/Minus, Active/Disabled
Style
Configure quantity text appearance
In stock
4 left in stock
Stock Status
Displays inventory levels and availability messages with configurable thresholds.
Controls
ProductID
Connect to CMS variable (required)
Threshold
Set inventory level for state change
Instance
Connect states for above and below threshold
Stock Status
Displays inventory levels and availability messages with configurable thresholds.
Controls
ProductID
Connect to CMS variable (required)
Threshold
Set inventory level for state change
Instance
Connect states for above and below threshold
Stock Status
Displays inventory levels and availability messages with configurable thresholds.
Controls
ProductID
Connect to CMS variable (required)
Threshold
Set inventory level for state change
Instance
Connect states for above and below threshold
4 left in stock
Inventory Counter
Display the available inventory count of a selected product or variant.
Controls
Style
Configure quantity text appearance
Inventory Counter
Display the available inventory count of a selected product or variant.
Controls
Style
Configure quantity text appearance
Inventory Counter
Display the available inventory count of a selected product or variant.
Controls
Style
Configure quantity text appearance
One-time Purchase
$39.99
Subscribe & Save
$29.99
One-time Purchase
$39.99
Subscribe & Save
$29.99
One-time Purchase
$39.99
Subscribe & Save
$29.99
Selling Plans
Manages one-time purchase and subscription options. Integrates with Shopify Sell Plan apps such as Seal Subscriptions.
Controls
ProductID
Connect to CMS variable (required)
Instance
Connect subscription interface design
Selling Plans
Manages one-time purchase and subscription options. Integrates with Shopify Sell Plan apps such as Seal Subscriptions.
Controls
ProductID
Connect to CMS variable (required)
Instance
Connect subscription interface design
Selling Plans
Manages one-time purchase and subscription options. Integrates with Shopify Sell Plan apps such as Seal Subscriptions.
Controls
ProductID
Connect to CMS variable (required)
Instance
Connect subscription interface design
Name for customization
Order Attribute Input
Allow users to input a text string to add to their order as an attribute. Appears in their cart on Framer and on Shopify.
Controls
Styles
Customize form text and styles
Required
Set the field as optional or required
Validate email
Set email validation if required
Attribute title
Set the attribute title sent to Shopify
Order Attribute Input
Allow users to input a text string to add to their order as an attribute. Appears in their cart on Framer and on Shopify.
Controls
Styles
Customize form text and styles
Required
Set the field as optional or required
Validate email
Set email validation if required
Attribute title
Set the attribute title sent to Shopify
Order Attribute Input
Allow users to input a text string to add to their order as an attribute. Appears in their cart on Framer and on Shopify.
Controls
Styles
Customize form text and styles
Required
Set the field as optional or required
Validate email
Set email validation if required
Attribute title
Set the attribute title sent to Shopify
Active Image Variant
A component that displays the currently selected variant from the Variant Selector component.
For demos and remix links, visit fc-image-variants.framer.website
Controls
Type
Choose your image to Fit or Fill the component
Image(s)
Connect your image variables to your product via the CMS.
Active Image Variant
A component that displays the currently selected variant from the Variant Selector component.
For demos and remix links, visit fc-image-variants.framer.website
Controls
Type
Choose your image to Fit or Fill the component
Image(s)
Connect your image variables to your product via the CMS.
Active Image Variant
A component that displays the currently selected variant from the Variant Selector component.
For demos and remix links, visit fc-image-variants.framer.website
Controls
Type
Choose your image to Fit or Fill the component
Image(s)
Connect your image variables to your product via the CMS.
Gallery
The Gallery is configured natively in Framer, with the thumbnail images using our component FC_ProductActiveVariantThumbnail.
This component has a tap event that is used to transition between the gallery states, and also gets triggered when a new variant is selected from the Variant Selector.
You can detach all the instances for full customizations, but keep in mind variable connections and states may get reset in the process.
For demos and remix links, visit fc-image-variants.framer.website
Controls
Image
Connect to each CMS image on the canvas level
Image Number
Assign an image number respective to the order in the Gallery
Type
Toggle between Fit or Fill image
Gallery
The Gallery is configured natively in Framer, with the thumbnail images using our component FC_ProductActiveVariantThumbnail.
This component has a tap event that is used to transition between the gallery states, and also gets triggered when a new variant is selected from the Variant Selector.
You can detach all the instances for full customizations, but keep in mind variable connections and states may get reset in the process.
For demos and remix links, visit fc-image-variants.framer.website
Controls
Image
Connect to each CMS image on the canvas level
Image Number
Assign an image number respective to the order in the Gallery
Type
Toggle between Fit or Fill image
Gallery
The Gallery is configured natively in Framer, with the thumbnail images using our component FC_ProductActiveVariantThumbnail.
This component has a tap event that is used to transition between the gallery states, and also gets triggered when a new variant is selected from the Variant Selector.
You can detach all the instances for full customizations, but keep in mind variable connections and states may get reset in the process.
For demos and remix links, visit fc-image-variants.framer.website
Controls
Image
Connect to each CMS image on the canvas level
Image Number
Assign an image number respective to the order in the Gallery
Type
Toggle between Fit or Fill image
Slideshow
A component that mimics Framer's native slideshow, but with CMS images and that jumps to the active variant if the Variant Selector prop on Images / Type is set to "Gallery".
Configure dots on the component itself, and/or use the Arrows and connect your local components.
For demos and remix links, visit fc-image-variants.framer.website
Controls
Style
Configure image fill or fit, number of items, overflow, padding, gap, and radius
Dots
Configure the styling of the dots as pagination
Arrows
Connect your local arrow design components for prev/next and disabled/active (separate component from Slideshow)
Slideshow
A component that mimics Framer's native slideshow, but with CMS images and that jumps to the active variant if the Variant Selector prop on Images / Type is set to "Gallery".
Configure dots on the component itself, and/or use the Arrows and connect your local components.
For demos and remix links, visit fc-image-variants.framer.website
Controls
Style
Configure image fill or fit, number of items, overflow, padding, gap, and radius
Dots
Configure the styling of the dots as pagination
Arrows
Connect your local arrow design components for prev/next and disabled/active (separate component from Slideshow)
Slideshow
A component that mimics Framer's native slideshow, but with CMS images and that jumps to the active variant if the Variant Selector prop on Images / Type is set to "Gallery".
Configure dots on the component itself, and/or use the Arrows and connect your local components.
For demos and remix links, visit fc-image-variants.framer.website
Controls
Style
Configure image fill or fit, number of items, overflow, padding, gap, and radius
Dots
Configure the styling of the dots as pagination
Arrows
Connect your local arrow design components for prev/next and disabled/active (separate component from Slideshow)
Stay updated
Release notes, promos, & more
© Copyright Framer Commerce 2024.
Stay updated
Release notes, promos, & more
© Copyright Framer Commerce 2024.
Stay updated
Release notes, promos, & more
© Copyright Framer Commerce 2024.