You are here:
Design the Checkout Page in a Commerce Store
Use a preset layout and customize its components, or design a layout using sections and components to guide customers through the checkout process in a B2B store. You can customize checkout only if your store uses custom checkout. If your store uses managed checkout, you can’t customize the Checkout page.
Required Editions
| View supported editions. |
Which Salesforce Commerce Product Do I Have?
If your B2B store was created with the Aura template, use flows to edit checkout. See B2B Commerce Checkout Flow.
- In the navigation sidebar, select a store from the Store dropdown.
- Select Website Design, and then click Experience Builder.
-
In Experience Builder, select the Checkout page.
If you have a new D2C store, the checkout page displays the Checkout Layout: Salesforce component. This component is locked, and you can’t customize it. To design your own page, first remove this layout.
If you have an existing store without a Salesforce Payments license, your checkout page might be blank. Go to the next step to add layouts or components.
If you have a store created before the Winter ’24 release, you can replace legacy components. Legacy components are still supported, but they don’t support new Commerce features. When you replace legacy components, you can’t add them back.
If you have a B2B store with Guest Checkout enabled, you must replace the legacy components. Otherwise, email verification fails at checkout. -
Add a preset layout. The checkout layouts include the necessary components for an
optimized checkout experience.
If you prefer to design your own layout, use sections. The Checkout Section component contains a heading, an Action button, and content space for components. You can add and remove sections, and add or remove components within a section. You can’t add a promotion section to a custom layout.
-
From the component menu, drag a checkout layout onto your page.
The one-page layout displays all checkout sections and forms on a single page. The accordion layout contains sections that expand and collapse as a customer completes the checkout steps. To change the navigation button label for each section, customize the Action Button component.
-
If your store was created before the Winter ’24 release, add the Place Order Button
and Checkout Error Notification components to your layout component.
The Checkout Notification component is required to show errors to customers during checkout. Add only one Checkout Notification component to the page regardless of any error configurations you’ve made to any checkout sections in your store. If you have more than one component on the page, customers see multiple windows for notifications.
- To show Promotions and the option to enter coupons in Cart Summary, on the layout component, select Show the checkout summary column.
-
From the component menu, drag a checkout layout onto your page.
-
If you're using the One-Page layout or Accordion layout, enable the Checkout Summary
component.
- To open your layout's component settings, click the Checkout Layout: One-Page or Checkout Layout: Accordion component on your page.
- To show a summary of cart information including price, promotions, and cart items that pins to the right side of the screen, select Show the checkout summary column.
- To show a collapsible list of cart items for mobile checkout, select Show expandable cart items by default.
- Edit the Expandable Summary Heading for Mobile label.
