You are here:
Enable Cart Preview and Checkout from the Cart Icon in a Commerce Store
Let customers go to the Cart page, preview their cart, or complete their purchase on any page in your B2B store by including a mini cart display. In Experience Builder, customize the Cart Badge component to add these features.
Required Editions
| View supported editions. |
Which Salesforce Commerce Product Do I Have?
Note For stores created after Spring ‘25, when cart item quantities are updated,
the Cart page clears to recalculate. As a result, customers see a blank page with a loading
spinner before the Cart page reloads.
- In the navigation sidebar, select a store from the Store dropdown.
- Select Website Design, and then click Experience Builder.
-
On your store’s Home page, customize the Cart Badge component. To display settings for
new features like the mini cart, replace your Cart Badge component with the new
component.
The Cart Badge component is embedded in your store’s header and appears on every page on your site. It displays the cart icon and a badge to show the number of items in a cart. However, the My Profile page uses a different version of the Cart Badge component, so make sure to customize both versions.
-
To show the number of items in a customer’s cart on the cart icon, select
Show number of items in cart. From the dropdown, select
Total Items in Cart or Total Products in
Cart.
Total items counts all of a customer’s cart items, and total products displays only the number of unique items in the customer’s cart. If your store has Faster Add-to-Cart enabled, you can’t select Total Products in Cart. See Improve Product Page Performance in a B2B Store.
-
To customize the cart preview, open the Mini Cart section.
The mini cart is enabled by default for stores created after Winter ’25. It shows customers a sliding cart preview and checkout button when they click the cart icon. If you disable the mini cart, customers go directly to the Cart page when they click the cart icon.
- To let customers continue shopping from the mini cart, select Show continue shopping button.
- To let customers navigate to the Cart page from the mini cart, select Show view cart button. To bypass the Cart page during the checkout process, don’t select this option.
-
(Optional) If you have Commerce Einstein enabled, to recommend additional products
to customers, select Show product recommendations. See Commerce Einstein.
If you have a store created before Summer ’25, drag a new version of the Cart Badge component onto your page to pull in recommendations data.
-
To show the number of items in a customer’s cart on the cart icon, select
Show number of items in cart. From the dropdown, select
Total Items in Cart or Total Products in
Cart.
- Preview and publish your changes.
Did this article solve your issue?
Let us know so we can improve!

