CartItem
Displays the summary information of a product in the cart.
The
CartItem component displays the summary information of a product in the cart. It's a compound component that combines product image, summary details, pricing, and quantity controls. Typical use cases include:- Displaying items in shopping cart sidebars and drawers.
- Showing cart contents in checkout flows.
- Listing items in minicart dropdowns.
- Presenting cart items in cart pages.
Example
Code
Apple Magic Mouse
Color: Black
Size: Medium
Original price:$999Price:$950.04
Usage
Import the component
_10import { CartItem, CartItemImage, CartItemSummary } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/molecules/CartItem/styles.scss";
For details, see Importing FastStore UI component styles.
Examples
Unavailable
Example
Code
Apple Magic Mouse
Color: Black
Size: Medium
Original price:$999Price:$950.04
With discount
Example
Code
Apple Magic Mouse
Color: Black
Size: Medium
Original price:$999Price:$950.04
Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-cart-item-padding | var(--fs-spacing-3) |
--fs-cart-item-bkg-color | var(--fs-control-bkg) |
--fs-cart-item-border-width | var(--fs-border-width) |
--fs-cart-item-border-color | var(--fs-border-color-light) |
--fs-cart-item-border-radius | var(--fs-border-radius) |
Design tokens: Image
Cart item images use consistent sizing and border radius to maintain visual consistency and alignment within the cart item layout.
| Local token | Default value/Global token linked |
|---|---|
--fs-cart-item-image-border-radius | var(--fs-cart-item-border-radius) |
--fs-cart-item-image-width | var(--fs-spacing-8) |
--fs-cart-item-image-height | var(--fs-cart-item-image-width) |
Design tokens: Title
Title tokens control typography and spacing for the product name, ensuring clear readability and proper visual hierarchy within the cart item.
| Local token | Default value/Global token linked |
|---|---|
--fs-cart-item-title-margin-bottom | var(--fs-spacing-0) |
--fs-cart-item-title-line-height | 1.2 |
--fs-cart-item-title-color | var(--fs-color-text) |
Design tokens: SKUs
SKU tokens manage the display of product variations (size, color, etc.), using compact typography and spacing to present multiple attributes without overwhelming the cart item layout.
| Local token | Default value/Global token linked |
|---|---|
--fs-cart-item-skus-margin-top | var(--fs-spacing-0) |
--fs-cart-item-skus-text-size | var(--fs-text-size-legend) |
--fs-cart-item-skus-text-color | var(--fs-color-text-light) |
--fs-cart-item-skus-line-height | var(--fs-text-size-body) |
--fs-cart-item-skus-column-gap | var(--fs-spacing-1) |
--fs-cart-item-skus-row-gap | var(--fs-spacing-0) |
Design tokens: Prices
Price tokens control spacing between price elements, ensuring clear presentation of current and list prices when discounts are applied.
| Local token | Default value/Global token linked |
|---|---|
--fs-cart-item-price-gap | var(--fs-spacing-1) |
Data attributes
You can target and override
CartItem styles using the following data attributes:data-fs-cart-itemdata-fs-cart-item="unavailable"data-fs-cart-item-contentdata-fs-cart-item-imagedata-fs-cart-item-summarydata-fs-cart-item-titledata-fs-cart-item-skusdata-fs-cart-item-remove-buttondata-fs-cart-item-pricesdata-fs-cart-item-actionsProps
CartItem
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest). | fs-cart-item |
| price | PriceDefinition | Specifies product Price. | |
| quantity | number | Specifies the quantity of items of the same product. | |
| unitMultiplier | number | Controls by how many units the value advances | |
| useUnitMultiplier | false | true | Controls wheter you use or not the unitMultiplier | |
| unavailable | false | true | Specifies that this product is unavailable. | |
| removeBtnProps | Partial<IconButtonProps> | Props for the Remove from cart IconButton component. | |
| onQuantityChange | (value: number) => void | Event emitted when product quantity value is changed. |
CartItemImage
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest). | fs-cart-item-image |
CartItemSummary
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest). | fs-cart-item-summary |
| title* | string | Specifies the product's title. | |
| activeVariations | { label: string; option: string; }[] | Array of the product's chosen variations. | [] |
Other Resources
PriceDefinition
| Name | Type | Description | Default |
|---|---|---|---|
| value | number | The raw price value. | |
| listPrice | number | Product's list price | |
| formatter | PriceFormatter | (price: number, variant: PriceVariant) => ReactNode |
Best Practices
✅ Do's
- Always include a product image using
CartItemImageto help users identify items in their cart. - Display clear pricing information, including both current price and list price when applicable.
- Show product variations (size, color, etc.) using
activeVariationsinCartItemSummaryto help users distinguish between similar items. - Use the
unavailableprop to clearly indicate when an item is no longer available for purchase. - Ensure product images have descriptive
alttext for accessibility. - Display accurate quantity information to help users track their cart contents.
❌ Don'ts
- Don't omit essential product information such as title, price, or image.
- Don't use generic placeholder images when product images are available.
- Don't hide quantity controls or make them difficult to access.
- Avoid displaying cart items without proper spacing or visual separation between items.
- Don't forget to handle unavailable items appropriately—either remove them or clearly mark them as unavailable.