Cookies help us enhance your experience on our site by storing
information about your preferences and interactions. You can customize your
cookie settings by choosing which cookies to allow. Please note that disabling
certain cookies might impact the functionality and features of our services,
such as personalized content and suggestions.
Cookie Policy
These cookies are strictly necessary for the site to work and may not be disabled.
Cookie name
Description
Lifetime
Provider
_ce.clock_data
Store the difference in time from the server's time and the current browser.
1 day
Crazy Egg
_ce.clock_event
Prevent repeated requests to the Clock API.
1 day
Crazy Egg
_ce.irv
Store isReturning value during the session
Session
Crazy Egg
_ce.s
Track a recording visitor session unique ID, tracking host and start time
1 year
Crazy Egg
_hjSessionUser_2909345
Store a unique user identifier to track user sessions and interactions for analytics purposes.
1 year
HotJar
_hjSession_2909345
Store session data to identify and analyze individual user sessions.
1 day
HotJar
apt.uid
Store a unique user identifier for tracking and personalization.
1 year
Mageplaza
cebs
Store user preferences and settings.
Session
Mageplaza
cf_clearance
Store a token that indicates a user has passed a Cloudflare security challenge.
1 year
Cloudflare
crisp-client
The crisp-client/session cookie is used to identify and maintain a user session within the Crisp platform. It allows the live chat system to recognize returning users, maintain chat history, and ensure continuity in customer service interactions.
Session
Crisp
_ga
Store a unique client identifier (Client ID) for tracking user interactions on the
2 years
Google
_ga_7B0PZZW26Z
Store session state information for Google Analytics 4.
2 years
Google
_ga_JTRV42NV3L
Store session state information for Google Analytics 4.
2 years
Google
_ga_R3HWQ50MM4
Store a unique client identifier (Client ID) for tracking user interactions on the website.
2 years
Google
_gid
Store a unique client identifier (Client ID) for tracking user interactions on the website.
1 day
Google
_gat_UA-76130628-1
Throttle the request rate to Google Analytics servers.
1 day
Google
Advertising cookies
Advertising cookies deliver ads relevant to your interests, limit ad frequency, and measure ad effectiveness.
Advertising cookies deliver ads relevant to your interests, limit ad frequency, and measure ad effectiveness.
Cookie name
Description
Lifetime
Provider
_gcl_au
The cookie is used by Google to track and store conversions.
1 day
Google
__Secure-3PAPISID
This cookie is used for targeting purposes to build a profile of the website visitor's interests in order to show relevant and personalized Google advertising.
2 years
Google
HSID
This security cookie is used by Google to confirm visitor authenticity, prevent fraudulent use of login data and protect visitor data from unauthorized access.
2 years
Google
__Secure-1PSID
This cookie is used for targeting purposes to build a profile of the website visitor's interests in order to show relevant and personalized Google advertising.
2 years
Google
SID
This security cookie is used by Google to confirm visitor authenticity, prevent fraudulent use of login data and protect visitor data from unauthorized access.
2 years
Google
APISID
This cookie is used by Google to display personalized advertisements on Google sites, based on recent searches and previous interactions.
2 years
Google
__Secure-1PAPISID
This cookie is used for targeting purposes to build a profile of the website visitor's interests in order to show relevant and personalized Google advertising.
2 years
Google
__Secure-3PSID
This cookie is used for targeting purposes to build a profile of the website visitor's interests in order to show relevant and personalized Google advertising.
2 years
Google
SSID
This cookie is used by Google to display personalized advertisements on Google sites, based on recent searches and previous interactions.
2 years
Google
SAPISID
This cookie is used by Google to display personalized advertisements on Google sites, based on recent searches and previous interactions.
2 years
Google
__Secure-3PSIDTS
This cookie collects information about visitor's interactions with Google services and ads. It is used to measure advertising effectiveness and deliver personalised content based on interests. The cookie contains a unique identifier.
2 years
Google
__Secure-1PSIDTS
This cookie collects information about visitor's interactions with Google services and ads. It is used to measure advertising effectiveness and deliver personalised content based on interests. The cookie contains a unique identifier.
2 years
Google
SIDCC
This security cookie is used by Google to confirm visitor authenticity, prevent fraudulent use of login data, and protect visitor data from unauthorized access.
3 months
Google
__Secure-1PSIDCC
This cookie is used for targeting purposes to build a profile of the website visitor's interests in order to show relevant and personalized Google advertising.
1 year
Google
__Secure-3PSIDCC
This cookie is used for targeting purposes to build a profile of the website visitor's interests in order to show relevant and personalized Google advertising.
1 year
Google
1P_JAR
This cookie is a Google Analytics Cookie created by Google DoubleClick and used to show personalized advertisements (ads) based on previous visits to the website.
1 month
Google
NID
Show Google ads in Google services for signed-out users.
6 months
Google
Analytics cookies
Analytics cookies collect information and report website usage statistics without personally identifying individual visitors to Google.
Analytics cookies collect information and report website usage statistics without personally identifying individual visitors to Google.
Cookie name
Description
Lifetime
Provider
_dc_gtm
Manage and deploy marketing tags through Google Tag Manager.
1 year
Google
1P_JAR
Gather website statistics and track conversion rates for Google AdWords campaigns.
1 month
Google
AEC
1 month
Google
ar_debug
Debugging purposes related to augmented reality (AR) functionalities.
1 month
Doubleclick
IDE
The IDE cookie is used by Google DoubleClick to register and report the user's actions after viewing or clicking on one of the advertiser's ads with the purpose of measuring the effectiveness of an ad and to present targeted ads to the user.
1 year
Doubleclick
ad_storage
Enables storage, such as cookies (web) or device identifiers (apps), related to advertising.
1 year
Google
ad_user_data
Sets consent for sending user data to Google for online advertising purposes.
1 year
Google
ad_personalization
Sets consent for personalized advertising.
1 year
Google
analytics_storage
Enables storage, such as cookies (web) or device identifiers (apps), related to analytics, for example, visit duration.
How to Customize Shipping Address Template in Magento 2
Vinh Jacker|03-17-2025
Customizing the shipping address template in Magento 2 allows store owners to align the checkout process with their branding and enhance user experience. This guide provides a step-by-step approach to modifying the shipping address template effectively.
Why Need to Customize the Shipping Address Template in Magento 2?
Customizing the shipping address template in Magento 2 offers several advantages that can significantly enhance your store’s functionality and user experience. Here’s why you might want to customize this template:
Enhanced Branding: Personalizing the template ensures it aligns with your store’s branding, creating a cohesive look and feel across your website.
Improved User Experience: Simplify the checkout process by rearranging fields or adding helpful instructions, making it more intuitive for customers.
Meet Specific Business Needs: Add or remove fields to accommodate unique business requirements, such as capturing specific customer information relevant to your operations.
Streamlined Data Collection: Ensure the shipping address template collects all the necessary data while removing irrelevant fields to avoid confusion or delays in order processing.
How to customize shipping address template in 7 steps
Step 1: Create JS renderer component
You should implement your shipping address renderer as a JavaScript UI component. It has to be a RequireJS module, and has to return a factory function, that takes a configurable object.
To ensure compatibility, upgradability, and easy maintenance, please add your customizations in a separate module instead of the default Magento code. Besides, if you want your checkout customization to be applied correctly, your custom module has to depend on the Magento_Checkout module. The module’s composer.jso is the place where module dependencies are specified. The Ui should not be used for your custom module name as %Vendor%_Ui notation is required when specifying paths, which might lead to some issues.
In the directory of your custom module, generate the file component’s .js. This file must be located under the directory <your_module_dir>/view/frontend/web/js/view/.
Below is a shipping address renderer’s general view:
define([
'ko',
'uiComponent',
'Magento_Checkout/js/action/select-shipping-address',
'Magento_Checkout/js/model/quote'
], function(ko, Component, selectShippingAddressAction, quote) {
'use strict';
return Component.extend({
defaults: {
template: '%path to your template%'
},
initProperties: function () {
this._super();
this.isSelected = ko.computed(function() {
var isSelected = false;
var shippingAddress = quote.shippingAddress();
if (shippingAddress) {
isSelected = shippingAddress.getKey() == this.address().getKey();
}
return isSelected;
}, this);
return this;
},
/** Set selected customer shipping address */
selectAddress: function() {
selectShippingAddressAction(this.address());
},
/** additional logic required for this renderer **/
});
});
Step 2: Create a template for shipping address renderer
In this step, you need to create a <your_module_dir>/view/frontend/web/template/<your_template>.html file in your custom module directory. You can use Knockout JS syntax for your template.
A button which is used for setting the address for shipping should be included in the template.
Step 3: Create JS model for shipping rate processor
Retrieving the shipping rates that are available for the given shipping address is the responsibility of a shipping rate processor.
Create a component’s .js file for the processor in your custom module directory. This file have to be located under the directory <your_module_dir>/view/frontend/web/js/model/
Here, the URL that is used to calculate the shipping rates for your custom address type needs to be specified.
Down here is a shipping rate processor code’s sample:
A .js UI component that registers the rated processor and the saving processor needs to be created in your custom module directory. This component needs to be located under the <your_module_dir>/view/frontend/web/js/view/ directory.
Step 6: Declare new components in checkout page layout
A <your_module_dir>/view/frontend/layout/checkout_index_index.xml file needs to be created in your custom module directory. Then add the following code in that file:
Step 7: Add shipping address renderer to Ship-To block
In the Review and Payment Information step, the shipping address is shown in the Ship-To section, which ensures that everything is set correctly.
If you want the address type to be shown here, you also need to render it by creating a .html template. And declare in the corresponding location in the layout.
Add template for displaying address in Ship-To section
You need to create a <your_module_dir>/view/frontend/web/template/<your_template>.html file in your custom module directory. You can use Knockout JS syntax for your template.
Best Practices for Customizing Shipping Address Template in Magento 2
When customizing the shipping address template in Magento 2, it’s essential to follow best practices to ensure your changes are effective, maintainable, and do not disrupt your store’s functionality. Below are some key best practices:
Use a Custom Module or Child Theme: Avoid editing core Magento files directly. Use a custom module or a child theme to make your changes upgrade-safe.
Backup Your Store: Before implementing any customization, always create a backup of your Magento store to safeguard your data and configurations.
Test in a Staging Environment: Perform all changes and testing in a staging or development environment to avoid impacting your live store during the customization process.
Clear Cache Regularly: Magento relies heavily on caching. Always clear your store’s cache after making changes to ensure your customizations take effect properly.
Follow Magento Coding Standards: Adhere to Magento’s coding practices and standards to ensure your changes integrate seamlessly with the platform.
Conclusion
Customizing the shipping address template in Magento 2 is a powerful way to enhance your store’s checkout experience. By creating a custom module or child theme, you can make these changes in a way that is safe and maintainable. Follow the steps outlined in this guide to achieve a personalized and user-friendly checkout process.
Jacker is the Chief Technology Officer (CTO) at Mageplaza, bringing over 10 years of experience in Magento, Shopify, and other eCommerce platforms. With deep technical expertise, he has led numerous successful projects, optimizing and scaling online stores for global brands. Beyond his work in eCommerce development, he is passionate about running and swimming.
Discover a step-by-step framework for effective social media marketing. Learn how to optimize content, run ads, track KPIs, and future-proof your strategy across all major platforms.
Discover a step-by-step framework for effective social media marketing. Learn how to optimize content, run ads, track KPIs, and future-proof your strategy across all major platforms.
Discover a step-by-step framework for effective social media marketing. Learn how to optimize content, run ads, track KPIs, and future-proof your strategy across all major platforms.
Discover a step-by-step framework for effective social media marketing. Learn how to optimize content, run ads, track KPIs, and future-proof your strategy across all major platforms.