Cart components reference
All cart components share one live Shopiframe cart across your site.
Cart Overlay
Cart component is built from several Shopiframe components, and you can easily modify its design and layout. You can use the Cart as an overlay or a page in your project.
Property
What it controls
Tap
Framer event exposed by the design component. Connect it when the parent interaction needs to respond to a tap.
Cart List
Display a list of products added to the shopping cart with their image, title, variant label, price, quantity controls, and remove action.
Property
What it controls
Empty component
Custom Framer component shown when the cart contains no lines.
Gap
Space between cart items.
Item
Direction, alignment, background, gap, font, border, radius, and padding of each cart row.
Image
Size, border, radius, fit, and aspect ratio.
Counter
Quantity typography, gap, colors, background, border, radius, padding, and icon size/color.
Title
Product-title typography, color, spacing, and tracking.
Variant Label
Variant-label typography, color, spacing, and tracking.
Price Styles
Price typography, color, spacing, and tracking.
Remove
Remove-icon color/size, background, border, radius, and padding.
Cart Counter
Displays the number of items in the cart and updates automatically whenever the cart changes.
Property
What it controls
Style
Typography, width, height, background, border, and radius.
Hide on 0
Hides the component when the count is zero.
Default: Off
Count all variants
Yes sums item quantities;
No counts cart lines.
Default: No
Cart Subtotal
Displays the cart subtotal before shipping and taxes. Updates automatically whenever the cart changes.
Property
What it controls
Style
Typography, color, padding, and tracking.
Reverse Currency
Reverses the formatted currency and amount order.
Checkout Button
Redirects the user to the Shopify checkout URL for the current cart. It disables automatically when a live checkout URL is unavailable or the cart is empty.
Property
What it controls
Hide when empty
Removes the component when the cart count is zero. Otherwise the empty-cart button remains visible but disabled.
Type
Uses the built-in button or a connected custom button component.
Button Component
Custom Framer button instance used when Type is Custom.
Component Variants
Names of the custom button’s Default, Loading, and Disabled variants.
Label
Built-in button text. Default: Checkout.
Style
Built-in button typography, color, background, border, radius, and padding.
Hover
Built-in button hover color, background, and border.
Left Icon / Right Icon
Optional preset or custom image icon, including its size, gap, and color.
The canvas does not perform a live redirect. Test checkout in Framer Preview and on the published site.
Promotion Progress Bar
Motivate shoppers with a live progress bar in the cart that updates as they add items. Set a spending threshold to unlock a promotion—free shipping, a discount, or any incentive you choose.
Property
What it controls
Threshold
Cart subtotal required to complete the promotion. Default: 100 in the active currency.
Progress Message
Message shown below the threshold. Supports {{amount}}, {{target}}, and {{percentage}}
{{amount}} means the amount still required,
{{target}} is the configured threshold,
{{percentage}} is rounded progress.
Completed Message
Message shown at or above the threshold.
Show Remaining
Shows a separate remaining-amount label while progress is incomplete.
Remaining Label
Separate label text. Supports {{amount}}, {{target}}, and {{percentage}}.
Hide When Empty
Hides the component when every cart line has zero quantity or no cart exists.
Container
Background, border, radius, padding, and gap.
Message
Typography, amount highlight color, padding, tracking, and left/center/right alignment.
Remaining
Typography, color, padding, and tracking of the optional remaining label.
Track
Height, background, border, and radius.
Progress
Fill color, radius, and width animation.
Reverse Currency
Reverses the formatted currency and amount order in message tokens.