Menu
Guides
API Reference
App Development
Storefront Development
VTEX IO Apps
Troubleshooting
Release Notes
Storefront Development
Getting started with storefront solutions
FastStore
Store Framework
CMS Portal (Legacy)
Storefront best practices

CartSidebar

Displays the summary of items added to the cart along with detailed information and checkout options.

3 min read
Source code
The CartSidebar component displays the summary of items added to the cart, along with detailed information and checkout options. The component is composed of the following:
  • CartSidebar: renders a SlideOver wrapper containing CartSidebarList and CartSidebarFooter.
  • CartSidebarList: wraps a series of CartItems and Gifts.
  • CartSidebarFooter: wraps an OrderSummary usually with the Checkout button.
Typical use cases include:
  • Displaying a slide-out cart sidebar from the header navigation.
  • Showing cart contents with order summary in checkout flows.
  • Presenting cart items with pricing and shipping information.
  • Providing quick access to cart management without leaving the current page.
Example
Code

Usage

Import the component


_10
import { CartSidebar, CartSidebarList, CartSidebarFooter } from "@faststore/ui";

Import styles

To apply styles, include the following in your stylesheet:

_10
@import "@faststore/ui/src/components/organisms/CartSidebar/styles.scss";

For details, see Importing FastStore UI component styles.

Design tokens

Local tokenDefault value/Global token linked
--fs-cart-sidebar-bkg-color
var(--fs-color-neutral-bkg)

Design tokens: List

The list section contains cart items and gifts, using padding to create adequate spacing between items and maintain visual hierarchy.
Local tokenDefault value/Global token linked
--fs-cart-sidebar-list-paddingvar(--fs-spacing-3)
The footer section displays the order summary and checkout button, using background color and box-shadow to create visual separation from the list and emphasize the checkout action.
Local tokenDefault value/Global token linked
--fs-cart-sidebar-footer-bkg-color
var(--fs-color-neutral-0)
--fs-cart-sidebar-footer-box-shadow0 0 6px rgb(0 0 0 / 20%)

Data attributes

You can target and override CartSidebar styles using the following data attributes: data-fs-cart-sidebar
data-fs-cart-sidebar-title
data-fs-cart-sidebar-list
data-fs-cart-sidebar-footer

Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).fs-cart-sidebar
titlestringTitle for the CartSidebar component.Your Cart
direction"leftSide" | "rightSide"Represents the side that the CartSidebar comes from.rightSide
size"full" | "partial"Represents the size of the CartSidebar.partial
totalItems*numberTotal of item in the Cart.
alertIconstring | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalA React component that will be rendered as an icon on the Alert component.
alertTextstringThe content for Alert component.
overlayPropsPropsProps forwarded to the `Overlay` component.
onClose*() => voidFunction called when Close Button is clicked.

Best Practices

✅ Do's

  • Always include CartSidebarList and CartSidebarFooter to provide a complete cart experience.
  • Display accurate item counts using the totalItems prop to help users understand their cart contents.
  • Use the alertIcon and alertText props to communicate shipping thresholds or promotional messages.
  • Include an OrderSummary component in the footer to show pricing breakdown and total.
  • Ensure the sidebar can be easily closed and doesn't block critical page content.
  • Display cart items using CartItem components for consistent presentation.

❌ Don'ts

  • Don't omit the order summary or checkout button from the footer.
  • Don't display incorrect item counts or pricing information.
  • Avoid cluttering the sidebar with too many promotional messages or alerts.
  • Don't make the sidebar too narrow or too wide—ensure it's suitable for viewing cart contents.
  • Avoid blocking important page content when the sidebar is open.
  • Don't forget to handle empty cart states appropriately.