📍 Bolt Help / Add-Ons / SSO Commerce / Embedded Shopper Account Editing / Implement the Address Component
Implement the Address Component
Steps to implement the Address Component from the Embedded Shopper Account Editing add-on.

The Address Component enables merchants to embed a piece of the shopper’s Bolt Account into their own UI.


Ensure the Bolt Embed Script is available on the page you are implementing the address component.

Step 1: Replace the Cart Platform Default Address Component

Replace your cart platform’s default address component with a placeholder div element.

Remove the default address code block from the source code with the BigCommerce template editor.

Replace it with:

<div id="addresses_list" />

In the Magento admin dashboard, write javascript to select the address element using querySelector. Then, add the javascript code to Block under Content - Block. Finally, attach the Block to Content - Widget.


// Check page title and make sure it's executed on the right page
if (document.querySelector("[data-ui-id='page-title-wrapper']")?.innerHTML === "Address Book") {
    // create a placeholder div
    var address_div = document.createElement('div');
    address_div.setAttribute("id", "addresses_list");

    // replace the cart platform default component with the placeholder div

Step 2: Mount the Address Component

Add the following javascript code to the storefront execution process.

    function mountAddressElement() {
      var BoltEmbedded = window.Bolt("${PUBLISHABLE_KEY}");
      var address_component = BoltEmbedded.create("shopper_address");

    // load Bolt script and mount component
    if (window.Bolt) {
    } else {
      var embedScript = document.querySelector('#bolt-embed');
      embedScript.addEventListener('load', function() {

Next Steps

Next, embed the Payment Component into your UI to enable shoppers to edit their payment methods from your site.

Filter by Section
Filter by Topic