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
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)
Instance
Connect button states: Selected, Unselected, Out of Stock
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)
Instance
Connect button states: Selected, Unselected, Out of Stock
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)
Instance
Connect button states: Selected, Unselected, Out of Stock
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
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.