Cart components

Manage cart state and display line items. Framerce syncs cart data with Shopify's Storefront API, so visitors see live prices, quantities, and variant details.

Adding to cart

FmCartAddButton

Adds the selected variant to the cart. Shows loading and sold-out states automatically. Reads from the product context to determine which variant to add.

FmCartQuickAdd

One-click add to cart for simple products (single variant). Useful in catalog grids where visitors browse without opening a product detail page.

Cart overview

FmCartCounter

Displays the number of items in the cart. Use this in your navigation bar to show a badge.

FmCartSubtotal

Displays the cart total price, formatted for the active market currency.

FmCartCheckout

Checkout button that redirects the visitor to Shopify's secure hosted checkout. Disables when the cart is empty.

FmCartTrigger

Opens or closes the cart drawer. Connect this to any button or icon, and it toggles the cart's open state.

FmCartState

Toggles child visibility based on whether the cart has items. Use slots to show different content for empty and non-empty states.

FmCartState
  ├── Empty slot → "Your cart is empty"
  └── Has Items slot → FmCartItemList + FmCartSubtotal

FmCartClear

Removes all items from the cart.

WARNING

This action is irreversible. The visitor's cart empties immediately with no confirmation.

Line items

FmCartItemList

Repeats its children for each cart line item. Nest your layout inside, and each child component reads the current line item automatically.

WARNING

Cart line item components (FmCartItemImage, FmCartItemTitle, etc.) must be nested inside FmCartItemList. They have no data outside this context.

FmCartItem

Wrapper for a single line item. Use when you need line-item-level controls like visibility or click handling.

FmCartItemImage

Displays the product image for a cart line item.

FmCartItemTitle

Displays the product title for a cart line item.

FmCartItemPrice

Displays the line item price (unit price × quantity).

FmCartItemQuantity

Adjusts the line item quantity with increment/decrement controls.

FmCartItemVariant

Displays the selected variant options for a line item (e.g., "Size: M, Color: Blue").

FmCartQuantityButton

Standalone increment or decrement button for line item quantity. Use when you want custom +/− buttons instead of the built-in FmCartItemQuantity control.

FmCartQuantityDisplay

Displays the current quantity for a line item as plain text.

FmCartItemButton

Action button for a line item, typically used for remove-from-cart.

Composition example

FmCartState
  ├── Empty → "Your cart is empty"
  └── Has Items
      ├── FmCartItemList
      │   └── Frame (line item layout)
      │       ├── FmCartItemImage
      │       ├── FmCartItemTitle
      │       ├── FmCartItemVariant
      │       ├── FmCartItemPrice
      │       └── FmCartItemQuantity
      ├── FmCartSubtotal
      ├── FmCartCheckout
      └── FmCartClear

See Layout & Slots for more composition patterns.