Loading
Salesforce now sends email only from verified domains. Read More
Salesforce B2B Commerce
Table of Contents
Filter by (0)Add
Select Filters

          No results
          No results
          Here are some search tips

          Check the spelling of your keywords.
          Use more general search terms.
          Select fewer filters to broaden your search.

            Search all of Salesforce Help
            Search all of Salesforce Help
            Design the Cart Page in a B2B Commerce Store

            You are here:

            1. Salesforce Help
            2. Docs
            3. B2B Commerce

            Design the Cart Page in a B2B Commerce Store

            The Cart page is where customers can review their order before checking out in a B2B store. In Experience Builder, you can customize the page to show line item details, total costs, and savings. You can also style the checkout button and add a field for customers to enter coupon codes.

            Required Editions

            View supported editions.

            Which Salesforce Commerce Product Do I Have?

            Note
            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.
            1. In the navigation sidebar, select a store from the Store dropdown.
            2. Select Website Design, and then click Experience Builder.
            3. In Experience Builder, go to the Cart page.
            4. Customize the Cart component.
              The Cart component contains the Cart Items component, along with an empty state that shows when the customer has no items in their cart.
            5. Customize the Cart Items component.
              The Cart Items component shows the products in the cart, along with the related details that you want to include. If your store was created before Winter ’25, pagination doesn’t show on a live storefront. If you encounter this issue, replace the Cart Items component with the new component.
              1. To add a button so that customers can delete a line item from their cart, select Show remove item option.
              2. To show the total price for each line item, select Show line item total.
              3. To customize how customers navigate multiple cart line items, select a Cart Item Pagination option.
                The Scroll option presents an accessibility limitation. For keyboard users, there isn’t a link to exit the cart items list. To exit the list, keyboard users must continue through the list to get to the bottom, or backtrack to the top of the list.
              4. In the Product Details section, select which information to show for each line item.
              5. In the Price Per Unit section, select whether to show the price per unit and customize the style.
              6. In the Original Price and Actual Price sections, select which prices to show and customize the style.
                The original price is the base price from the store’s price book. The actual price is the final price for the current customer. If the original price is higher than the actual price, it’s crossed out.
              7. In the Promotion Details section, select whether to show the available promotions for a line item and customize the style.
              8. In the Quantity Selector section, select whether to show the quantity selector and label. Edit the text for the quantity selector rules. Quantity rules apply only in B2B stores.
            6. Customize the Cart Summary component.
              The Cart Summary component shows a list of total costs and savings in the cart. The subtotal line includes the total for all cart items and any item-level promotions applied to individual products. The promotions field includes only cart-level promotions applied to the total transaction. All promotions are displayed below the cart summary.
              1. In the Cart Summary properties, select which information you want to show.
              2. If your store tax type is Gross, select whether to show a note that tax is included.
              3. In the Style section, edit the design properties.
            7. To show a coupon field and a list of applied promotions, customize the Coupons and Applied Promotions components. These components are contained in the Promotions component.
            8. (Optional) If you want to show approaching discount alerts, add the Approaching Discounts component.
            9. Customize the Checkout Button component.
              By default, the Checkout Button component is inside a Sticky Container component, so the checkout button remains on screen during mobile scrolling.
            10. (Optional) If you have Salesforce Payments and you want to provide digital wallet payment options, add the Express Checkout component. If your store uses Omnichannel Inventory or a third-party inventory service, orders placed using express payment options fail. Express Checkout payment options don’t support inventory checks.
              Express Checkout supports Apple Pay, Amazon Pay, Google Pay, PayPal, and Venmo. In the component properties panel, enter a payment method set key, and make other customizations as needed. Express Checkout doesn’t support split shipping or subscriptions.
            11. Preview and publish your changes.

            To show a cart preview and enable checkout from other pages in your store, customize the Cart Badge component. See Enable Cart Preview and Checkout from the Cart Icon in a Commerce Store.

            See Also

             
            Loading
            Salesforce Help | Article