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.