Liquid, JavaScript, themes, sales channels
Any time I paste in the code for the 'basic' layout [which is just the Add to Cart button] into my site, it's duplicating the button. Upon saving, its only one. The moment I reload the page it turns into two versions. The code is listed below
<div id='product-component-1614809757947'></div>
<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();
}
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: 'thookclub.myshopify.com',
storefrontAccessToken: 'ac11a92b037e828fdd35dba0e3ec74f9',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '6548619559104',
node: document.getElementById('product-component-1614809757947'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px"
},
"text-align": "left"
},
"title": {
"font-family": "Lora, serif",
"font-weight": "normal",
"color": "#f5f5f5"
},
"button": {
":hover": {
"background-color": "#3c3c3c"
},
"background-color": "#232323",
":focus": {
"background-color": "#3c3c3c"
},
"border-radius": "8px",
"padding-left": "38px",
"padding-right": "38px"
},
"price": {
"font-family": "Lora, serif",
"font-weight": "bold",
"color": "#ffffff"
},
"compareAt": {
"font-family": "Lora, serif",
"font-weight": "bold",
"color": "#ffffff"
},
"unitPrice": {
"font-family": "Lora, serif",
"font-weight": "bold",
"color": "#ffffff"
},
"description": {
"font-family": "Lora, serif",
"color": "#cccccc"
}
},
"contents": {
"img": false,
"title": false,
"price": false
},
"text": {
"button": "Add to cart"
},
"googleFonts": [
"Lora"
]
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"button": false,
"buttonWithQuantity": true
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
":hover": {
"background-color": "#3c3c3c"
},
"background-color": "#232323",
":focus": {
"background-color": "#3c3c3c"
},
"border-radius": "8px",
"padding-left": "38px",
"padding-right": "38px"
},
"title": {
"font-family": "Helvetica Neue, sans-serif",
"font-weight": "bold",
"font-size": "26px",
"color": "#4c4c4c"
},
"price": {
"font-family": "Helvetica Neue, sans-serif",
"font-weight": "normal",
"font-size": "18px",
"color": "#4c4c4c"
},
"compareAt": {
"font-family": "Helvetica Neue, sans-serif",
"font-weight": "normal",
"font-size": "15.299999999999999px",
"color": "#4c4c4c"
},
"unitPrice": {
"font-family": "Helvetica Neue, sans-serif",
"font-weight": "normal",
"font-size": "15.299999999999999px",
"color": "#4c4c4c"
},
"description": {
"font-family": "Helvetica Neue, sans-serif",
"font-weight": "normal",
"font-size": "14px",
"color": "#4c4c4c"
}
},
"text": {
"button": "Add to cart"
}
},
"option": {},
"cart": {
"styles": {
"button": {
":hover": {
"background-color": "#3c3c3c"
},
"background-color": "#232323",
":focus": {
"background-color": "#3c3c3c"
},
"border-radius": "8px"
},
"title": {
"color": "#0f0f0f"
},
"header": {
"color": "#0f0f0f"
},
"lineItems": {
"color": "#0f0f0f"
},
"subtotalText": {
"color": "#0f0f0f"
},
"subtotal": {
"color": "#0f0f0f"
},
"notice": {
"color": "#0f0f0f"
},
"currency": {
"color": "#0f0f0f"
},
"close": {
"color": "#0f0f0f",
":hover": {
"color": "#0f0f0f"
}
},
"empty": {
"color": "#0f0f0f"
},
"noteDescription": {
"color": "#0f0f0f"
},
"discountText": {
"color": "#0f0f0f"
},
"discountIcon": {
"fill": "#0f0f0f"
},
"discountAmount": {
"color": "#0f0f0f"
}
},
"text": {
"total": "Subtotal",
"button": "Checkout"
},
"popup": false
},
"toggle": {
"styles": {
"toggle": {
"background-color": "#232323",
":hover": {
"background-color": "#3c3c3c"
},
":focus": {
"background-color": "#3c3c3c"
}
}
}
},
"lineItem": {
"styles": {
"variantTitle": {
"color": "#0f0f0f"
},
"title": {
"color": "#0f0f0f"
},
"price": {
"color": "#0f0f0f"
},
"fullPrice": {
"color": "#0f0f0f"
},
"discount": {
"color": "#0f0f0f"
},
"discountIcon": {
"fill": "#0f0f0f"
},
"quantity": {
"color": "#0f0f0f"
},
"quantityIncrement": {
"color": "#0f0f0f",
"border-color": "#0f0f0f"
},
"quantityDecrement": {
"color": "#0f0f0f",
"border-color": "#0f0f0f"
},
"quantityInput": {
"color": "#0f0f0f",
"border-color": "#0f0f0f"
}
}
}
},
});
});
}
})();
/*]]>*/
</script>
Currently, I have the same issue.
Have you already solved?
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024