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
Instance
Connect design with cart icon/text and counter
Cart Overlay Trigger
Displays your cart icon and counter and opens the cart overlay when an item is added.
Controls
Instance
Connect design with cart icon/text and counter
Cart Overlay Trigger
Displays your cart icon and counter and opens the cart overlay when an item is added.
Controls
Instance
Connect design with cart icon/text and counter
Navy Ballcap
Style: Snapback
1
Cart Product Card
Displays individual cart items with quantity controls and removal options.
Controls
Instance
Connect cart product card component
Cart Product Card
Displays individual cart items with quantity controls and removal options.
Controls
Instance
Connect cart product card component
Cart Product Card
Displays individual cart items with quantity controls and removal options.
Controls
Instance
Connect cart product card component
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.