Customize checkout experience
CREATED FOR:
- Beginner
- Developer
Learn how to customize the checkout experience in Adobe Commerce from the Edge Delivery Services cart drop in component, focusing on modifying shipping options and implementing a multi-step checkout process.
What you’ll learn
Learn examples for customization of the Edge Delivery Services cart drop in checkout experience by removing and re-adding elements like shipping options and estimated costs, and implementing a multi-step checkout process, all while reusing existing code and following best practices.
Who is this video for?
- Developers and technical professionals working with Adobe Commerce, Edge Delivery Services and using the cart drop in
Video content
- Customization of Checkout Experience
- Implementation of Multi-Step Checkout
- Reusing Existing Code and Best Practices

Transcript
When we consider the Adobe Commerce experience, these personas are used and they help explain the story. You will hear one or more of them referenced.
In this video, we’re going to focus on a few ways that are available to help customize the checkout experience. So let’s show you how developer Ali is able to modify or customize the base checkout experience to meet some different project requirements. So for this scenario, developer Ali has been tasked with extending the checkout to display delivery options and the estimated shipping cost, but only after someone like a customer has introduced some shipping information. So for this task, developer Ali has decided to use the default Commerce Checkout block and update it to meet these new project requirements. So we’re going to start by opening up the code and looking at the block. This is the Commerce Checkout and this is the default block that comes provided out of the box. So our first task is to identify the place where these containers are being rendered onto the page and remove the shipping container and the shipping methods container, and also remove the estimated shipping cost as well. So let’s do that. This is the bit of code. This is where the containers are rendered onto the page. So what we need to do is remove the delivery reference.
Then we want to make sure that we remove the rendering of the shipping method container. And after we’ve updated the rendering of the order summary container, we basically want to remove the estimated shipping as well. So now if we switch back to the checkout, the front end, this is how it looks by default. And you can see here that the shipping options are properly displayed, the estimated shipping costs are right there. But when we refresh the page, we’re going to see that those estimated shipping is no longer there and that the delivery options are not displayed. So we have achieved that very first step, which is removing those containers. Now, developer Ollie needs to create a new function, and this is what we will use to display the shipping method. And that’s going to contain the logic that’s used to render the shipping method container that we just removed and the update the order summary container and pass along this logic. So to do that, we’re going to head back to the code. And we’re going to add this little code snippet. And if you can read it, what it’s doing here is it’s adding the code that we just previously removed from the initial rendering to render the shipping method container. And we are showing the order summary container to add this logic to the estimated shipping cost. Next, developer Ollie needs to locate the checkout event callers that are registered. So that he can add these calls to this new method that he created to display the shipping methods when needed.
And if you look closely, you can see here that these event callers for checkout events, which are the checkout initialize and the checkout update.
So what developer Ollie is going to do is to add these calls So what developer Ollie is going to do is he’s going to add this small bit of code to both of them, to the handler of the initialize and to the handler of the updated. And this small snippet, what it’s going to do is it’s going to check to see if the checkout data contains a valid shipping address. And if it does, it’s going to call that method that will eventually is used to render the shipping method and display the estimated shipping cost.
Finally, our last step for this is to add a small placeholder. And this is to inform customers that the shipping options are only going to be visible when they provide a valid shipping address. So to do that, what we’re going to do is we’re going to add a little bit to our checkout fragment.
And this is the section that defines the layout for the checkout. And here inside the delivery block, we’re going to add our placeholder, which is basically a title and it’s going to be just like a background color. So now if we switch back to the checkout and we refresh the page, we’re going to see that there’s a new gray background and a nice title, which is our placeholder.
So we know that it’s being displayed. And finally, the last thing we need to do is verify that all this logic that we added is working or not. So let’s go ahead and let’s prove it out.
So you can see when the shipping address is synchronized with the cart, the shipping options and the shipping costs are displayed. And once we’ve completed all this, this means that we’ve completed our first scenario. And now what we’re going to do is we’re going to refresh the page and validate that if the checkout is initialized with a shipping address and the shipping options are there, it should automatically show those shipping options and costs automatically. So we refresh the page and you can see I don’t need to reintroduce my shipping address because it’s already there and the estimated shipping cost is displayed. So by following these steps, Developer Ali was able to successfully change the default checkout experience and meet these new project requirements. And of course, he’s very happy. And now we can go check our next scenario. So for this use case, Developer Ali has been asked to implement a multi-step checkout. And in order to achieve this goal, he’s going to duplicate the original checkout block and we’re going to use it as a starting point to be able to use and reuse as much code as possible from that original block. So what we’re going to first do is we’re going to duplicate that block and if we cut over to my code, we’ll see that I’ve decided to call it the checkout multi-step.
And what we’re going to do is we’re going to open it up and hopefully you can see here that it’s very similar to the original one. In fact, it’s almost identical. We just removed some code that we’re not going to need from inside the decorate function. And from now, in order to load it, what we’re going to do is we’re going to change this block to load our new multi-step version.
So now that we’ve completed that, we’re going to be loading in our new block and if we head back and refresh the page, we can see an empty page, but this is actually expected because we removed everything from inside the decorate function. And now we need to start implementing this new multi-step checkout together with the developer, Ali, and our first step is going to be update the layout.
So we’re going to go ahead and open up that multi-step checkout block and we’re going to update the default layout and we’re going to take from the original block and we’re going to replace this bit of code right here with a little bit of code from here. And from this, hopefully you can tell that we’ve split the checkout into three different sections, one being shipping, another being delivery, and then the final one payment. And then you also added some buttons to the shipping and another button to the delivery section. This allows customers to navigate through the steps when it’s possible. So our next step is to update the DOM references according to the new layout. So we just have a little bit of edits here and basically you can see it’s the same, we’re just changing the references to those new elements that we just created. But the code is basically the same. So a developer, Ali, now is going to use that same approach as we used in the base block to render the initial containers. So let’s go ahead and do that. And from here, what we’re doing is, in this case, we’re not only rendering some of the additional containers at checkout, but we’re also rendering some components from the SDK, some headers and some buttons. But for this, our initial step, so now if we move back to the checkout and we refresh the page, we’ll see that our overall base structure is there that we just created. And at this point, developer Ali is going to use that same methodology that was used to customize the delivery options in his previous task. And for this, he’s going to create three new functions, one for each of those sections that we created. So this first one, this is going to be for the shipping. And in this case, what we’re going to do is we’re going to remove that skeleton, which is the loader that you see on the page, and we are going to render the shipping form. And he’s going to do the same for the delivery. And for this part, we are rendering the shipping method container, and we’re adding the estimated shipping cost slot to the order summary, which is exactly as we had done before. So here we are also rendering that continue to payment button, which is a component from the SDK. And finally, what we’re going to do is we’re going to create that function for the payment section, which is going to render all of those remaining containers from the original block, which are the bill to shipping, checkbox, the billing form, that payment method, and that place order button.
Next, developer Ali, he needs to remember that he has to do some changes to the checkout event handlers in order to incorporate all of this new logic. Right, so that he just created all this to call those new methods. And he’s going to do that. We’re going to start by updating the handler for the checkout updated method. And he’s going to add this little bit of code. And what he’s doing here is he’s checking the data, and he’s updates enabling the corresponding parents. So for example, if the cart already contains a shipping address, he’s going to enable that button to allow customers to continue to that delivery step. And the same with the payment section as well.
And finally, he’s going to update the handler for the initialize event. And in this case, what he’s actually doing is he’s automatically displaying the proper step based on the initial data of the checkout. So for example, if the customer has already introduced a shipping address and selected the shipping method and that payment step, he wants it to be displayed automatically. So we don’t want our customers to lose progress. So if we go back here, and we can see that the first step is properly displayed, and we need to validate our logic is working that we just created. So we’re going to go ahead and start by entering a shipping address. And in this case, when the shipping address is synchronized with the cart, you’re going to see that that button is enabled, and it’s going to allow us to continue to the next step. And that is the delivery step. It’s displayed. And because we only have one shipping option, it’s already selected, and you can see here that the Continue to Payment button is enabled as well. So if I click it, you’re going to see that the last step is being rendered, which contains the Bill to Shipping checkbox, the payment selector and the payment method, and the place order button. So I would be able to change the billing address if I want to, but for this example, we’re just going to leave it as is. And this last step is to validate that if I refresh the page, we are going to be brought back to this current step, which is the payment. So let’s go ahead and refresh the page. And as you can see, I don’t need to click on the Continue to Payment or Continue to Delivery button. I’m already here. So by following these basic steps, developer Ollie was successfully able to implement this new multi-step checkout. And most importantly, by using those exact same containers, those same patterns and best practices used from the original checkout block. And by reusing as much code as possible, this obviously goes faster. And of course, he’s very happy. So with that, we’ve completed this phase of our work, and we are ready for whatever comes next.
Additional Documentation
Commerce
- Commerce Tutorials
- Adobe Commerce Cloud
- Getting Started
- Global Reference Architecture
- Help and support
- Edge Delivery Services
- Webinars and events
- GraphQL and REST
- Adobe Developer App Builder
- Store Administration
- Customer Management
- Catalog Management
- Content Management
- Marketing Tools
- Orders and Fulfillment
- B2B for Adobe Commerce
- Tools and External services
- Commerce Intelligence
- Commerce Upgrades
- Back-end Development
- Native Front-end Luma Development
- Headless Architecture