Shopify Button
-
Hi I am trying to add a shopify button to my website, but everytime I add in the javascript for it the button shows at the bottom of my homepage. What am I doing wrong?
<!-- SHOPIFY -->
<script>
Frontend.GlobalEvents.on('newpageshown', function(){function ShopifyBuyInit() { var client = ShopifyBuy.buildClient({ domain: 'sixoverone.myshopify.com', apiKey: '6bcba7d0a1f8b95ab9e5b16f854ab92f', appId: '6', }); ShopifyBuy.UI.onReady(client).then(function (ui) { ui.createComponent('product', { id: [454150389802], node: document.getElementById('product-component-855b57d3151'), 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": true, "quantity": false }, "styles": { "product": { "text-align": "left", "@media (min-width: 601px)": { "max-width": "100%", "margin-left": "0", "margin-bottom": "50px" } }, "button": { "background-color": "#f4e973", "color": "#000000", ":hover": { "background-color": "#dcd268", "color": "#000000" }, "border-radius": "0px", ":focus": { "background-color": "#dcd268" } }, "title": { "font-size": "26px" }, "price": { "font-size": "18px" }, "compareAt": { "font-size": "15px" } } }, "cart": { "contents": { "button": true }, "styles": { "button": { "background-color": "#f4e973", "color": "#000000", ":hover": { "background-color": "#dcd268", "color": "#000000" }, "border-radius": "0px", ":focus": { "background-color": "#dcd268" } }, "footer": { "background-color": "#ffffff" } } }, "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": "#f4e973", "color": "#000000", ":hover": { "background-color": "#dcd268", "color": "#000000" }, "border-radius": "0px", ":focus": { "background-color": "#dcd268" } } } }, "toggle": { "styles": { "toggle": { "background-color": "#f4e973", ":hover": { "background-color": "#dcd268" }, ":focus": { "background-color": "#dcd268" } }, "count": { "color": "#000000", ":hover": { "color": "#000000" } }, "iconPath": { "fill": "#000000" } } }, "productSet": { "styles": { "products": { "@media (min-width: 601px)": { "margin-left": "-20px" } } } } } }); }); }
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
window.ShopifyBuy && window.ShopifyBuy.UI ? ShopifyBuyInit() : loadScript();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; } })(); });
</script>
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it
Forgot your key, lost your files, need a previous Lay Theme or Addon version?
Go to www.laykeymanager.com