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
Trigger Cart
Enable or disable the tap event that is connected to your cart overlay trigger component. If in your cart overlay, disable to prevent the cart from closing.
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
Trigger Cart
Enable or disable the tap event that is connected to your cart overlay trigger component. If in your cart overlay, disable to prevent the cart from closing.
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
Trigger Cart
Enable or disable the tap event that is connected to your cart overlay trigger component. If in your cart overlay, disable to prevent the cart from closing.
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
Save $10
Price Discount
Calculates and displays percentage-based or amount-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 or amount-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 or amount-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
Product ID
Connect to CMS variable (required)
Image IDs
Connect to "Image Variant IDs" CMS variable (optional, if you want to trigger image changes or display Variant Images)
Style
Choose between Buttons or a Dropdown
Behavior
Choose to auto-select first available variants or load without any selection Choose to show or hide variant groups that only have one option
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
Title
Show or hide variant group titles and customize the styles
Selected Value
Show or hide a text display of the selected value beside the variant group title, and then style it.
Color Swatches
Turn on or off Color Swatch UI, and customize styles. In the plugin under Store Settings, configure the values below and one-click save to update all components: Set a list of Titles that will show the Color Swatch UI (i.e. "Color") Set a list of Values and Hex Codes (i.e. "Red" "#FF0000")
Image Swatches
Turn on or off Image Swatch UI, and customize styles or choose to inherit from the Color Swatch UI. In the plugin under Store Settings, configure the values below and one-click save to update all components: Set a list of Titles that will show the Image Swatch UI (i.e. "Pattern") Upload your images and matching Variant values (i.e. "Leather")
Variant Images
Turn on or off Variant Images to display your CMS Images that are mapped to each variant and customize styles or choose to inherit from the Color Swatch UI. In the plugin under Store Settings, configure your list of Titles that will show the Variant Image UI (i.e. "Style") and one-click save to update all components. Once turned on, connect the "Image 1" "Image 2" "Image 3" etc. variables to your CMS. Make sure Image IDs field is also connected to the CMS.
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
Product ID
Connect to CMS variable (required)
Image IDs
Connect to "Image Variant IDs" CMS variable (optional, if you want to trigger image changes or display Variant Images)
Style
Choose between Buttons or a Dropdown
Behavior
Choose to auto-select first available variants or load without any selection Choose to show or hide variant groups that only have one option
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
Title
Show or hide variant group titles and customize the styles
Selected Value
Show or hide a text display of the selected value beside the variant group title, and then style it.
Color Swatches
Turn on or off Color Swatch UI, and customize styles. In the plugin under Store Settings, configure the values below and one-click save to update all components: Set a list of Titles that will show the Color Swatch UI (i.e. "Color") Set a list of Values and Hex Codes (i.e. "Red" "#FF0000")
Image Swatches
Turn on or off Image Swatch UI, and customize styles or choose to inherit from the Color Swatch UI. In the plugin under Store Settings, configure the values below and one-click save to update all components: Set a list of Titles that will show the Image Swatch UI (i.e. "Pattern") Upload your images and matching Variant values (i.e. "Leather")
Variant Images
Turn on or off Variant Images to display your CMS Images that are mapped to each variant and customize styles or choose to inherit from the Color Swatch UI. In the plugin under Store Settings, configure your list of Titles that will show the Variant Image UI (i.e. "Style") and one-click save to update all components. Once turned on, connect the "Image 1" "Image 2" "Image 3" etc. variables to your CMS. Make sure Image IDs field is also connected to the CMS.
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
Product ID
Connect to CMS variable (required)
Image IDs
Connect to "Image Variant IDs" CMS variable (optional, if you want to trigger image changes or display Variant Images)
Style
Choose between Buttons or a Dropdown
Behavior
Choose to auto-select first available variants or load without any selection Choose to show or hide variant groups that only have one option
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
Title
Show or hide variant group titles and customize the styles
Selected Value
Show or hide a text display of the selected value beside the variant group title, and then style it.
Color Swatches
Turn on or off Color Swatch UI, and customize styles. In the plugin under Store Settings, configure the values below and one-click save to update all components: Set a list of Titles that will show the Color Swatch UI (i.e. "Color") Set a list of Values and Hex Codes (i.e. "Red" "#FF0000")
Image Swatches
Turn on or off Image Swatch UI, and customize styles or choose to inherit from the Color Swatch UI. In the plugin under Store Settings, configure the values below and one-click save to update all components: Set a list of Titles that will show the Image Swatch UI (i.e. "Pattern") Upload your images and matching Variant values (i.e. "Leather")
Variant Images
Turn on or off Variant Images to display your CMS Images that are mapped to each variant and customize styles or choose to inherit from the Color Swatch UI. In the plugin under Store Settings, configure your list of Titles that will show the Variant Image UI (i.e. "Style") and one-click save to update all components. Once turned on, connect the "Image 1" "Image 2" "Image 3" etc. variables to your CMS. Make sure Image IDs field is also connected to the CMS.
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
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)
Shop Pay
A one-click Buy Now button that brings your customer directly to the Shopify checkout with their Shop Pay info pre-populated and ready to go.
Note that checkout language is not supported with the Shop Pay button.
Controls
Product ID
Connect to CMS variable (required)
Text
Set "Buy with" or custom text if needed
Color
Choose from Shopify-approved color combinations
Shop Pay
A one-click Buy Now button that brings your customer directly to the Shopify checkout with their Shop Pay info pre-populated and ready to go.
Note that checkout language is not supported with the Shop Pay button.
Controls
Product ID
Connect to CMS variable (required)
Text
Set "Buy with" or custom text if needed
Color
Choose from Shopify-approved color combinations
Shop Pay
A one-click Buy Now button that brings your customer directly to the Shopify checkout with their Shop Pay info pre-populated and ready to go.
Note that checkout language is not supported with the Shop Pay button.
Controls
Product ID
Connect to CMS variable (required)
Text
Set "Buy with" or custom text if needed
Color
Choose from Shopify-approved color combinations
Quick add
Quick Add Button
Let customers add products directly to their cart from any page with a single click. This button instantly adds the first available variant to the cart –– no selection necessary.
Controls
Product ID
Connect to CMS variable (required)
Instance
Connect button states: Available, Out of Stock
Type
Select Add to Cart or Buy Now functionality
Trigger Cart
Enable or disable the tap event that is connected to your cart overlay trigger component. If in your cart overlay, disable to prevent the cart from closing.
Quick Add Button
Let customers add products directly to their cart from any page with a single click. This button instantly adds the first available variant to the cart –– no selection necessary.
Controls
Product ID
Connect to CMS variable (required)
Instance
Connect button states: Available, Out of Stock
Type
Select Add to Cart or Buy Now functionality
Trigger Cart
Enable or disable the tap event that is connected to your cart overlay trigger component. If in your cart overlay, disable to prevent the cart from closing.
Quick Add Button
Let customers add products directly to their cart from any page with a single click. This button instantly adds the first available variant to the cart –– no selection necessary.
Controls
Product ID
Connect to CMS variable (required)
Instance
Connect button states: Available, Out of Stock
Type
Select Add to Cart or Buy Now functionality
Trigger Cart
Enable or disable the tap event that is connected to your cart overlay trigger component. If in your cart overlay, disable to prevent the cart from closing.
Remix OFFSIDE template for free
Just log into Framer to explore how Framer Commerce works, no extra signup.
Stay up to date
Be the first to hear about new templates, features, and offers.
Remix OFFSIDE template for free
Just log into Framer to explore how Framer Commerce works, no extra signup.
Stay up to date
Be the first to hear about new templates, features, and offers.
Remix OFFSIDE template for free
Just log into Framer to explore how Framer Commerce works, no extra signup.
Stay up to date
Be the first to hear about new templates, features, and offers.