Hello! I was asked to update some custom html code on one of our landing pages, but when I plug the new (JS) code I was sent, nothing appears on the page and I can’t figure out why. The first time around, I was able to troubleshoot because I saw there were no styles attached. Now the code is updated with colors etc. and nothing shows. Any chance you could look at the code and tell me what I’m missing/need to do?
Thank you in advance!
<div id=‘collection-component-a0541ea622d’></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: ‘preventive-vet.myshopify.com’,
apiKey: ‘ea25c17f0c3e3d8b6d353860616c6101’,
appId: ‘6’,
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent(‘collection’, {
id: 1942192153,
node: document.getElementById(‘collection-component-a0541ea622d’),
moneyFormat: ‘%24%7B%7Bamount%7D%7D’,
options: {
“product”: {
“variantId”: “all”,
“contents”: {
“imgWithCarousel”: false,
“variantTitle”: false,
“description”: false,
“buttonWithQuantity”: false,
“quantity”: false
},
“text”: {
“button”: “ORDER NOW”
},
“styles”: {
“product”: {
“@media (min-width: 601px)”: {
“max-width”: “calc(33.33333% - 30px)”,
“margin-left”: “30px”,
“margin-bottom”: “50px”
}
},
“button”: {
“background-color”: “#ffa500”,
“font-size”: “17px”,
“padding-top”: “16.5px”,
“padding-bottom”: “16.5px”,
“:hover”: {
“background-color”: “#e69500”
},
“:focus”: {
“background-color”: “#e69500”
}
},
“quantityInput”: {
“font-size”: “17px”,
“padding-top”: “16.5px”,
“padding-bottom”: “16.5px”
}
}
},
“cart”: {
“contents”: {
“button”: true
},
“styles”: {
“button”: {
“background-color”: “#ffa500”,
“font-size”: “17px”,
“padding-top”: “16.5px”,
“padding-bottom”: “16.5px”,
“:hover”: {
“background-color”: “#e69500”
},
“:focus”: {
“background-color”: “#e69500”
}
},
“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”: “#ffa500”,
“font-size”: “17px”,
“padding-top”: “16.5px”,
“padding-bottom”: “16.5px”,
“:hover”: {
“background-color”: “#e69500”
},
“:focus”: {
“background-color”: “#e69500”
}
},
“quantityInput”: {
“font-size”: “17px”,
“padding-top”: “16.5px”,
“padding-bottom”: “16.5px”
}
}
},
“toggle”: {
“styles”: {
“toggle”: {
“background-color”: “#ffa500”,
“:hover”: {
“background-color”: “#e69500”
},
“:focus”: {
“background-color”: “#e69500”
}
},
“count”: {
“color”: “#ffffff”,
“:hover”: {
“color”: “#ffffff”
},
“font-size”: “17px”
},
“iconPath”: {
“fill”: “#ffffff”
}
}
},
“productSet”: {
“styles”: {
“products”: {
“@media (min-width: 601px)”: {
“margin-left”: “-30px”
}
}
}
}
}
});
});
}
})();
/*]]>*/
</script>
