Menu
I'm currently using the Shopify Buy Button.
For the most part, I just copy and pasted the embed code and didn't change much. If you scroll all the way down to "toggle":{, you'll notice I made it so iframe and sticky is set to false.
When a product is added to a cart, a button that toggle's the shopping cart appears in the body. .shopify-buy-frame.shopify-buy-frame--toggle
It normally appears as a fixed div on the middle right hand corner of the screen but since my sticky option is set to false, it is placed at the bottom of the body.
I'd like to be able to assign a parent container that this toggle button ends up in. Ideally, I want to put it in my header somewhere and not have it be generated at the bottom of the body of my page.
For example:
<body>
<header>
<div id="cart-toggle">
<!-- THIS IS WHERE I WANT IT TO APPEAR -->
</div>
<header>
<!-- THIS IS WHERE IT APPEARS -->
</body>
Bonus Points if I can figure out how to generate a second toggle button for my mobile navigation area.
I've searched the default compenents and the developer section for the toggle options and can't seem to figure it out.
If anyone could help it would be greatly appreciated.
My Embed Code
<script type="text/javascript">
/*<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy){if(window.ShopifyBuy.UI){ShopifyBuyInit();}else{loadScript();}}else{loadScript();}f
function loadScript() {var script = document.createElement('script');script.async = true;script.src = scriptURL;(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);script.onload = ShopifyBuyInit;}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({domain: 'domain.myshopify.com',apiKey: 'apikey',appId: '0'});
ShopifyBuy.UI.onReady(client).then(function(ui){ui.createComponent('product',{moneyFormat:'%24%7B%7Bamount%7D%7D',
options:{
"product":{
"variantId":"all",
"width":"240px",
"contents":{
"img":false,
"imgWithCarousel":false,
"title":false,
"variantTitle":false,
"price":false,
"description":false,
"buttonWithQuantity":false,
"quantity":false
},
"text":{
"button":"ADD TO BAG"
},
"styles":{
"product":{
"text-align":"left",
"@media(min-width:601px)":{
"max-width":"100%",
"margin-left":"0",
"margin-bottom":"50px"
}
},
"button":{
"background-color":"#393a39",
"font-family":"Lato,sans-serif",
"font-size":"13px",
"padding-top":"14.5px",
"padding-bottom":"14.5px",
"padding-left":"35px",
"padding-right":"35px",
":hover":{
"background-color":"#333433"
},
"border-radius":"0px",
":focus":{
"background-color":"#333433"
},
"font-weight":"normal"
},
"title":{
"font-size":"26px"
},
"price":{
"font-size":"18px"
},
"quantityInput":{
"font-size":"13px",
"padding-top":"14.5px",
"padding-bottom":"14.5px"
},
"compareAt":{
"font-size":"15px"
}
},
"googleFonts":[
"Lato"
]
},
"cart":{
"contents":{
"button":true
},
"text":{
"title":"Bag"
},
"styles":{
"button":{
"background-color":"#393a39",
"font-family":"Lato,sans-serif",
"font-size":"13px",
"padding-top":"14.5px",
"padding-bottom":"14.5px",
":hover":{
"background-color":"#333433"
},
"border-radius":"0px",
":focus":{
"background-color":"#333433"
},
"font-weight":"normal"
},
"footer":{
"background-color":"#ffffff"
}
},
"googleFonts":[
"Lato"
]
},
"modalProduct":{
"contents":{
"img":false,
"imgWithCarousel":true,
"variantTitle":false,
"buttonWithQuantity":true,
"button":false,
"quantity":false
},
"styles":{
"product":{
"@media(min-width:601px)":{
"max-width":"100%",
"margin-left":"0px",
"margin-bottom":"0px"
}
},
"button":{
"background-color":"#393a39",
"font-family":"Lato,sans-serif",
"font-size":"13px",
"padding-top":"14.5px",
"padding-bottom":"14.5px",
"padding-left":"35px",
"padding-right":"35px",
":hover":{
"background-color":"#333433"
},
"border-radius":"0px",
":focus":{
"background-color":"#333433"
},
"font-weight":"normal"
},
"quantityInput":{
"font-size":"13px",
"padding-top":"14.5px",
"padding-bottom":"14.5px"
}
},
"googleFonts":[
"Lato"
]
},
"toggle": {
"iframe":false,
"sticky":false,
"contents":{
"icon":true,
"title":false
},
"styles":{
"toggle":{
"font-family":"Lato,sans-serif",
"background-color":"#393a39",
":hover":{
"background-color":"#333433"
},
":focus":{
"background-color":"#333433"
},
"font-weight":"normal"
},
"count":{
"font-size":"13px"
}
},
"googleFonts":[
"Lato"
]
},
"productSet":{
"styles":{
"products":{
"@media(min-width:601px)":{
"margin-left":"-20px"
}
}
}
}
}
}
);});}
})();
/*]]>*/
</script>
360
From your Shopify admin, go to Products. Click the name of a product that you want to hide the Add to cart button on. On the product page of your Shopify admin, under Online store, choose your new requires-contact template from the Theme template drop-down. Click Save.
Look for an <input> or <button> tag with text like Add to cart , AddToCart , or add-to-cart . When you find the code, wrap it in Liquid {% comment %} and {% endcomment %} tags. This will stop the code from being shown on your store, but will let you easily put it back if you want to change your new template later.
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.
68
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)
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
