Cart components
Explore our cart-related Framer components that connect your site to Shopify.
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 Trigger
Displays your cart icon and counter and opens the cart overlay when an item is added.
Controls
Default
Connect component instance to your native design on the canvas that includes your cart counter.
When Empty
Use Default – This will keep the same design component for all states. Custom – This will allow you to connect a new component instance to display when empty. Hide – This will hide the whole component when empty.
Interactions
CartModal
Connect this tap event variable all the way up to the canvas to connect to your Cart Overlay to make sure it auto-opens your overlay when the users clicks on the Purchase Button.
Cart Trigger
Displays your cart icon and counter and opens the cart overlay when an item is added.
Controls
Default
Connect component instance to your native design on the canvas that includes your cart counter.
When Empty
Use Default – This will keep the same design component for all states. Custom – This will allow you to connect a new component instance to display when empty. Hide – This will hide the whole component when empty.
Interactions
CartModal
Connect this tap event variable all the way up to the canvas to connect to your Cart Overlay to make sure it auto-opens your overlay when the users clicks on the Purchase Button.
Cart Trigger
Displays your cart icon and counter and opens the cart overlay when an item is added.
Controls
Default
Connect component instance to your native design on the canvas that includes your cart counter.
When Empty
Use Default – This will keep the same design component for all states. Custom – This will allow you to connect a new component instance to display when empty. Hide – This will hide the whole component when empty.
Interactions
CartModal
Connect this tap event variable all the way up to the canvas to connect to your Cart Overlay to make sure it auto-opens your overlay when the users clicks on the Purchase Button.
Note: If you are using an earlier version of this component called FC_CartOverlayTrigger:
Simply place the component in the stack or frame that you want to act as a trigger, set the position to Absolute / Centered / 100% width + height, and make sure the z-index is higher than the other elements.
Then follow the same instructions for the CartModal tap event described above.
Navy Ballcap
Navy Ballcap
Style: Snapback
$50
1
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
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.