Cart components
Learn how to set up your Shopify store to work with Framer.
Cart components in this doc:
4
Cart Counter
Tracks and displays cart item quantity. Updates automatically with cart modifications.
Controls
Style
Configure text and background appearance
Cart Counter
Tracks and displays cart item quantity. Updates automatically with cart modifications.
Controls
Style
Configure text and background appearance
Cart Counter
Tracks and displays cart item quantity. Updates automatically with cart modifications.
Controls
Style
Configure text and background appearance
Add to cart
Cart Overlay Trigger
Displays your cart icon and counter and opens the cart overlay when an item is added.
Controls
Tap Event
Simply place this component set to Absolute and 100% of the container to act as a trigger, connecting the Tap Event all the way up to the Overlay in your navigation component which has your cart components.
Cart Overlay Trigger
Displays your cart icon and counter and opens the cart overlay when an item is added.
Controls
Tap Event
Simply place this component set to Absolute and 100% of the container to act as a trigger, connecting the Tap Event all the way up to the Overlay in your navigation component which has your cart components.
Cart Overlay Trigger
Displays your cart icon and counter and opens the cart overlay when an item is added.
Controls
Tap Event
Simply place this component set to Absolute and 100% of the container to act as a trigger, connecting the Tap Event all the way up to the Overlay in your navigation component which has your cart components.
Navy Ballcap
Style: Snapback
$50
1
Cart Product Card
Displays individual cart items with quantity controls and removal options.
Controls
Styles
Customize visual styles for all elements in the product card
Link
To link the product card to your product page, add the path between your domain and product slug. For example, if your product URL is claro.framer.app/shop/navy-ballcap, enter "shop/" in the path field.
Cart Product Card
Displays individual cart items with quantity controls and removal options.
Controls
Styles
Customize visual styles for all elements in the product card
Link
To link the product card to your product page, add the path between your domain and product slug. For example, if your product URL is claro.framer.app/shop/navy-ballcap, enter "shop/" in the path field.
Cart Product Card
Displays individual cart items with quantity controls and removal options.
Controls
Styles
Customize visual styles for all elements in the product card
Link
To link the product card to your product page, add the path between your domain and product slug. For example, if your product URL is claro.framer.app/shop/navy-ballcap, enter "shop/" in the path field.
Subtotal
$49.98
Cart Subtotal
Displays cart total before shipping and taxes. Updates automatically with cart changes.
Controls
Text
Configure appearance
Cart Subtotal
Displays cart total before shipping and taxes. Updates automatically with cart changes.
Controls
Text
Configure appearance
Cart Subtotal
Displays cart total before shipping and taxes. Updates automatically with cart changes.
Controls
Text
Configure appearance
Checkout
Checkout Button
Initiates Shopify checkout process. Supports multi-language functionality.
Controls
Instance
Connect button component
Checkout Button
Initiates Shopify checkout process. Supports multi-language functionality.
Controls
Instance
Connect button component
Checkout Button
Initiates Shopify checkout process. Supports multi-language functionality.
Controls
Instance
Connect button component
Navy Ballcap
1
Overalls
1
Green Blazer
1
Your cart's empty!
Shop now
Cart State Controller
Manages empty and populated cart states with corresponding interface updates.
Controls
Instance
Connect empty and populated cart states
Cart State Controller
Manages empty and populated cart states with corresponding interface updates.
Controls
Instance
Connect empty and populated cart states
Cart State Controller
Manages empty and populated cart states with corresponding interface updates.
Controls
Instance
Connect empty and populated cart states
Clear cart
Cart Clear Button
Clears the user's current cart.
Controls
Instance
Connect button component
Cart Clear Button
Clears the user's current cart.
Controls
Instance
Connect button component
Cart Clear Button
Clears the user's current cart.
Controls
Instance
Connect button component
Spend $25 more and get free shipping!
Promo Progress Bar
Give your user incentives by giving them a live progress bar in the cart based on the threshold you set.
Controls
Instance
Connect your design components
Threshold
Set the cart amount required to hit the threshold
Promo Progress Bar
Give your user incentives by giving them a live progress bar in the cart based on the threshold you set.
Controls
Instance
Connect your design components
Threshold
Set the cart amount required to hit the threshold
Promo Progress Bar
Give your user incentives by giving them a live progress bar in the cart based on the threshold you set.
Controls
Instance
Connect your design components
Threshold
Set the cart amount required to hit the threshold
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.