Shopify Toggle Cart Button location

You can use events option inside toggle config to define events you need. Use afterInit event to move toggle node in another place after initialization:

toggle: {
    events: {
        afterInit: function (component) {
            document.getElementById('cart-toggle').appendChild(component.node);
        },
    }
}

I assume that you can`t create two toggle components within a single Shopify embed. But you may operate on existing one using media queries in JS (i.e. enquire.js), so when your media query matches/unmatches, you move toggle button wherever you like in the DOM (i.e. inside mobile navigation area)


Read this on GitHub: insert toggle in the dom #569

I needed to do this very same thing. Verified, it worked for me. You can place a DIV anywhere and use your own CSS to style it. Yes, remember to set iframe and sticky to false.