Cart component reference
Cart components share one live Shopiframe cart across the site. Add to Cart changes this state; Cart List, Cart Counter, Cart Subtotal, Promotion Progress Bar, and Checkout Button respond automatically.
Cart components do not need Product Data. Place them anywhere that can access the same Shopiframe storefront configuration.
Use this page when you need detailed behavior or property information. For a guided setup, start with Build your storefront.
The tables list Shopiframe controls. Standard Framer layout controls are not repeated.
Cart Overlay
A detachable Framer design composition containing Cart List, Cart Subtotal, and Checkout Button. Insert it as a starting point, then edit the design component or use its pieces in your own overlay/page.
The nested cart code components keep their own properties. Select a nested component to edit the controls documented below.
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
Renders every cart line with its image, title, variant label, price, quantity controls, and remove action. Quantity changes and removals update the shared cart.
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 live cart count.
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.
For example, a cart with three units of one variant and one unit of another shows 4 when Count all variants is Yes and 2 when it is No.
Cart Subtotal
Displays the cart subtotal and updates when lines or quantities change.
Property
What it controls
Style
Typography, color, padding, and tracking.
Reverse Currency
Reverses the formatted currency and amount order.
Shipping, discounts applied at checkout, and taxes are not represented by this subtotal component.
Checkout Button
Redirects the shopper 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
Shows progress from the current cart subtotal to a configurable spending threshold. Progress is capped at 100%, and the completed message replaces the progress message once the threshold is reached.
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}}.
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.
{{amount}} means the amount still required, not the current subtotal. {{target}} is the configured threshold, and {{percentage}} is rounded progress.
Test the cart flow
Use the test and publish checklist to verify cart items, quantities, subtotal, promotion messages, and checkout.