[For all ADVANCED customisation, we recommend speaking with a website developer or Shopify expert]

 

In the example code snippet below, we show you how using a javascript "MutationObserver".

Anything that you load on the customers/account.liquid file- you can inject into the customer hub dashboard.

To do this you'll need to update the Javascript id "#element-to-inject" to whatever you want to inject from the account page code into the customer hub dashboard.

 

<div id="element-to-inject">INJECT THIS</div>
<script>
// Add to merchants customers/account.liquid to inject elements at the top of the Dashboard
if(location.pathname == '/account'){
    const chElementObserver = new MutationObserver((mutations, obs) => {
    try{
        var chFindElement = document.querySelector('#element-to-inject');
        if (chFindElement) {
            let chDashInsert = document.querySelector('#ChRecentOrders');
            let chInjectDiv = document.createElement('div');
            chInjectDiv.classList.add("chContent-Body-Page-General");
            chInjectDiv.innerHTML = chFindElement.innerHTML;
            chDashInsert.parentNode.insertBefore(chInjectDiv, chDashInsert);
            obs.disconnect();
            return;
        }
    }catch(e){
        console.log(e);
        obs.disconnect();
    }
    });
    chElementObserver.observe(document, {
        childList: true,
        subtree: true
    });
}
</script>

Using the same logic as above you're able to add anything you'd like to any section of the customer hub experience. Want to inject something into the orders section? You'll need to apply the above to the order.liquid file.

 

Added something new to the customer account page? We'd love to see! Feel free to send us a screenshot :)