Hi,

I have been using the Shopify app to embed buy buttons on my wordpress enfold child website. As this app is discontinued, I am manually trying to embed code from shopify into the page. The code embeds in the ‘text’ box, it is visible in the ‘visual’ box and can be clicked and the carts appears and updates. I save/update but then when i open the preview of my website it is not visible. I have tried entering the code in a code block, in a text block. I can’t figure it out.

Any help would be hugely appreciated as it doesn’t seem to make sense to me at all.

Here is the code I am trying to embed on my Teak paddle board page:

<div id=’product-component-e2d19cc7e14′></div>
<script type=”text/javascript”>
/*<![CDATA[*/

(function () {
var scriptURL = ‘https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js&#8217;;
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: ‘the-epicurean-architect.myshopify.com’,
storefrontAccessToken: ‘7c033492928c77dfca909d65deed0575’,
});

ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent(‘product’, {
id: [1428489830517],
node: document.getElementById(‘product-component-e2d19cc7e14’),
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
},
“styles”: {
“product”: {
“text-align”: “left”,
“@media (min-width: 601px)”: {
“max-width”: “calc(25% – 20px)”,
“margin-left”: “20px”,
“margin-bottom”: “50px”
}
},
“button”: {
“background-color”: “#9b9696”,
“:hover”: {
“background-color”: “#8c8787”
},
“:focus”: {
“background-color”: “#8c8787”
}
}
}
},
“cart”: {
“contents”: {
“button”: true
},
“styles”: {
“button”: {
“background-color”: “#9b9696”,
“:hover”: {
“background-color”: “#8c8787”
},
“:focus”: {
“background-color”: “#8c8787”
}
},
“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”: “#9b9696”,
“:hover”: {
“background-color”: “#8c8787”
},
“:focus”: {
“background-color”: “#8c8787”
}
}
}
},
“toggle”: {
“styles”: {
“toggle”: {
“background-color”: “#9b9696”,
“:hover”: {
“background-color”: “#8c8787”
},
“:focus”: {
“background-color”: “#8c8787”
}
},
“count”: {
“color”: “#ffffff”,
“:hover”: {
“color”: “#ffffff”
}
},
“iconPath”: {
“fill”: “#ffffff”
}
}
},
“productSet”: {
“styles”: {
“products”: {
“@media (min-width: 601px)”: {
“margin-left”: “-20px”
}
}
}
}
}
});
});
}
})();
/*]]>*/
</script>