I would like to add my own JS to this file to add a little customization to the checkout in Magento 2.


I tried copying it to my theme folder but it Magento doesn't pick it up, it still uses the file above.


How can I override this file? I thought I could have easily overriden this in my theme?

Do I need to create a module for it? And in it's /frontend/layout/checkout_index_index.xml file add something like:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceBlock name="checkout.root">
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="address-list" xsi:type="array">
                                                            <item name="component" xsi:type="string">Holy_MyModule/js/view/shipping-address/list</item>

Then I guess I can create my JS file in


But how can I make sure it picks up everything from Magento_Checkout? Is there something I need to add at the beginning of the file, in define block, Component.extend function, or the child functions like initChildren

1 Answer 1


If you need override js in your theme, just copy to your theme with corresponding path with same name


For extend component in module
1. Create requirejs-config.js in Vendor\Module-Name\view\frontend

var config = {
    'config': {
        'mixins': {
            'Magento_Checkout/js/view/shipping-address/list': {
                'Vnecoms_Demo/js/view/shipping-address/list': true


2. Create Vnecoms_Demo/view/frontend/web/js/view/shipping-address/list.js Follow name is your choice. Copy from original and modify with your demands

 * Copyright © 2017 Vnecoms, Inc. All rights reserved.
 * See COPYING.txt for license details.
/*global define*/
define([], function () {
    'use strict';

    return function (ListShipping) {
        return ListShipping.extend({
            defaults: {
                template: 'Magento_Checkout/shipping-address/list',
                rendererTemplates: [],
                isExtend: true,
                testVariable: 1

            initialize: function () {
                console.log('my custom');


To apply new changes

rm pub/static/frontend/
rm pub/static/_requirejs/
rm var/cache/
rm var/generation/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.