Customize an address layout
Last update: February 18, 2025
CREATED FOR:
- Beginner
- Developer
Learn how to customize the address form layout at checkout to ensure that all fields are 50% width, with the exception for the text area. Learn an approach to using an integrated third-party API, specifically the Google Address API, to enable auto address lookup and validation in the address form. Learn how to add a new sidebar menu item to the user account dashboard, linking to a custom page for a store locator.
Who is this video for?
Roles that would benefit from reading this transcript include:
- E-commerce Managers with to goal to understand how the checkout process and user account dashboard can be improved to enhance customer experience.
- Front-end Developers who need to gain insights into practical implementations of CSS adjustments, third-party API integrations, and UI component customizations.
- UX/UI Designers looking to see how design changes are implemented and validated to ensure a consistent and user-friendly interface.
Project Managers who need to track the progress of development tasks and understand the technical steps involved in achieving project goals. - Technical Leads that are overseeing the development process and ensure that best practices are followed in code implementation and integration.
Video content
- Consistent Field Widths in Checkout Forms to customize the address form at checkout to ensure all fields.
- Integration of Google Address API to enable auto address lookup and completion, reducing user input errors and streamlining the checkout process.
- Validation and Error Handling for the address input fields, ensuring that users receive immediate feedback on incorrect or incomplete entries, enhancing the user experience.
- Extension of User Account Dashboard that adds a new sidebar menu item to the user account dashboard.

Transcript
This is Russell with Adobe. When we consider the Adobe Commerce experience, these personas are used and they help explain our story. You will hear one or more of them referenced. For our first task today we’re going to be customizing the address layout and ecommerce leader Emma wants to customize the checkout to display a new version where the address form fields are 50% width of the container. It’s a fairly simple change and developer Ali can do it with only CSS. So we’re going to take a quick look at the default layout on the address format checkout and you can see some fields such as the first and last name they’re 50% width but others like email and street address they’re full width and we want all of these fields to be the same so we’re gonna adjust some CSS and it’s pretty straightforward. So let’s navigate to the Commerce codebase and we’re going to go to blocks and commerce checkout and the block controlling the checkout page. We’re going to open up the CSS file and scroll down to the place where the media query is that it handles the width that’s applied. Since we want to make sure that the changes affect the desktop view we’re going to make sure we’re in that section and we can achieve this by adding a new entry of CSS just like this. Now that we’re done we can save it and take a quick look at the results and here we go. It looks like our task is almost completed. Each field is definitely 50% width however we do notice that this change affected the text area and that results in some empty space off to the right. So we’re going to adjust this visual layout a little bit more and we’re going to make sure that the text area remains full width. So we’re going to add one more element to our file. We’re going to replace this class name with a modifier including the attribute code and this approach is great because each field has a unique class name with an attribute code as long as along with the modifier text which allows us to target a specific field within a form and now that we’ve made this change we can look at the results. And here we go we can say that developer Ali’s task is now complete. At this point it is nice to remember that this approach can be used any form such as the customer registration, customer information, and other forms to manage the layout. So it’s great we can move forward to our next developer use case. So for developer Ali his next task is to streamline the process of populating the delivery address to reduce the user input error and include some address lookup and some auto address completion. For this developer Ali will integrate a third-party API solution to the address form. And before we begin let’s take a look at our form once more and right now you can see this address field this is what developer Ali is going to use to begin with since it comes out of the box. There’s some basic validation enabled but there’s no auto address lookup functionality. So we can consider how to do this by extending the drop-in using the slot and leveraging the Google address API. So let’s see how developer Ali works to achieve this. We’re going to work and navigate to the Commerce Checkout JS and I’m going to zoom in and we’re going to try to identify the area where our shipping address form is rendered. To do this we’ll use our Chrome developer tools and we’re going to grab the data selector. We’re going to simply take that and search within our file. Here we go. So with that we know to go to the account provider renderer address form and basically this block is responsible for rendering the address form within a checkout page. So we’re going to add a slot API and the first step is to create an empty slot callback. And you might notice here that the name of the address form input street includes the attribute code as a modifier. It’s a similar approach to what we did with working with CSS and it allows overriding a very specific field using a slot. So right now we’re going to pass this callback function and I didn’t render anything. I just rendered some empty context so when we look at the result we’re going to see that it didn’t generate any any output. It’s just rendering empty space because once again I didn’t return anything. So we’re going to move forward and we’re going to populate that slot. So our first step would be to render some markup and to help speed things along I have a function which I prepared in advance and we’ll go through it in a few seconds but we’re going to paste it in here. I need to call it at the bottom. So our function is pretty straightforward. It’s a plain JS function that should generate some wrapper div and an error container and apply some CSS classes that makes it look consistent with the rest of the form to render the input element. And also call out that I’m using a drop-in UI component of an input type. This isn’t required to do so. You can just use plain HTML to achieve this. However in this case I prefer to use the input provided with the drop-in UI component. It makes it consistent with the rest of the form and for other future developers. So I’m applying some required properties to this input which are receiving them as context here. Which the required event listener and the input name the labels etc. And this allows me to make it fully functional and encapsulate the validation that will be applied later. So now we’re going to take a look at the results. Great here we go. Our address input box appears and it already looks nice however it’s not yet fully functional. If you try to type in something and then delete it you won’t get any error validation or error messages. This is where developer Ollie makes his next step. Heading back to the code we’re gonna collapse this function real quick and we’re gonna paste in another one that I’ve already prepared. So this function will be the callback and it’s designed to handle the state changes within the container. So here this is our callback and the handle state change where we would apply it as an event listener to our content context like this. What we’re going to be doing here is we’re applying the on change event listener to our context and this allows us to react on a state change within this slot. So in this case what we’re going to do we’re going to implement some validations this way. So this callback will be executed each time when the state changes of the component and we’re going to receive this new state in this object. Based on that we’re able to receive an error message and perform some logical operations like if an error message is present we can render it and we can set the input error state otherwise if it’s not present we can hide the error message. So we’re going to collapse this real quick and we’re going to take one quick look at the results. And when we try to type in something we’ll see that great that the validation works now and basically at this point our input that we built using a slot fully replicated the default input provided by the drop-in. So it is back to being fully functional so we could test it with some input and it is possible now to configure some validation at this point in the in the form but once again it’s just a replica of the original. So we need to move forward and integrate this with the third-party API for address lookup. To achieve that we’re going to initialize some third-party API’s linking some certain scripts and in this case it will be the one from Google but keep in mind there’s always a couple of ways to achieve this. So for us to keep things consistent and how the rest of the form works we’re going to use the decorate function. So I’ve prepared a bit of code and we’re going to insert this script into the document head and we’re going to move down our code block and let’s insert our function here which will initialize the Google API. I’ll paste it in and save and now for that our function called onplacechange we also want to call our function. This is the last function called the init autocomplete. I won’t dive in too deep on this advanced topic basically because it’s related to Google API’s and you can look that up but just a few key points here is that this function we initialize the Google Places API on our input elements and we have some configurations and we define a callback which receives the place data from the Google API and from here we’ll do some parsing and we’ll render this data in our drop-in input. So let’s take a quick look at how it looks now. So we’re going to try to type something in and you can see that our address lookup is already appearing and I have a drop-down and we’re able to select one. We can grab this address here. You might see that it has already populated the street address and the country and the city. So we’re going to try with some other address here. We’ll grab something from the Netherlands because that sounds fun. Once again you can see here that once I’ve added some other address, I can see that the country and the city are populated. So with that, this particular task is completed. We can extend this even further by adding other populated fields and doing some custom validations just like we just completed but for now this task and all the requirements have been met. So we’re going to move forward to our next developer experience use case. For this, our developer Ollie has been asked about extending the user account dashboard and developer Ollie has been asked to add a new sidebar menu item to the user account. We’re going to create one more additional item and this is going to link to a new custom page within the user account and for our part we’re just going to be adding a link to the page. The rest of the content will still need to be developed by another team. We’re going to log in and we’re going to see how this looks out of the box. So once I’ve logged in, we can see, there we go, we can see that the account dashboard on this left sidebar has four menu items available by default. So our goal for this one is going to be to extend it and add one more menu item. So this sidebar is actually fully manageable from SharePoint and to achieve this one we’re going to go to SharePoint and we’re going to navigate to the customer folder and we’re going to locate the sidebar fragment document and after opening it up it actually is a fairly simple document and it just contains a list which represents those menu items and those menu items are available in the sidebar menu and we’re going to add one more. We’re going to go with the text, how about my store and since this new page when it’s all done it will be used as a store and we’ll add a title and it’ll be what’s your favorite store target store and we’ll insert a new page and the last line of this would be the type of icon that we want to use and this is provided by the drop-in UI components and there’s more information on that available in the documentation but we’re just going to go with bulk for now. So we’ve extended this fragment and we’re going to use the browser extension to preview these changes that’s the fastest way to okay and we’re going to go back to my account go back to the dashboard check the results. So here we go our website and our menu items are extended with the additional item here and it matches what was used in the SharePoint my store choose your favorite target store and of course that icon and the on click when you take into the new page it works and the development team at this point is able to pick it up and continue the rest of the task so this new link to the new page is complete for the my store page and we have completed that last task now developer Ali and myself can just wait for our next task to come our way
Additional Documentation
Previous pageCustomize checkout
Next pageShopper-experience
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