App reviews, troubleshooting, and recommendations
Hi there,
I was looking to add a variable/dynamic 'Buy Button' for on the product pages. This because the Theme i have is ony showing 'Add to Cart' on the Product page. This is creating an 'extra step' in the process, because then first customers need to go to their cart and then click 'order'. Therefore want to also add the 'buy button' on the product pages 'Order', as well.
In my search it leads me to this Shopify app, called: Buy Button channel. However the problem with this app that it's more specified for Blogs and only do 1 product or 1 product collection, but what is needed is a variable/dynamic buy button that detects on which product page it is, does that in the basket and go to checkout, the moment you click on the buy button 'order'.
Is there anyone here knows how to make it variable/dynamic and where to put it in the Theme code? Also can do it as HTML code as a Section block, but then most likely the positioning is not so nice.
In below i have already the Script code of the Button, from this Shopify App. However it was specific on 1 single product ID. Many thanks in advance.
<div id='product-component-1720550087882'></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: 'kadoing.myshopify.com',
storefrontAccessToken: '84ed3b19a242df9b934f41ac0e4fedd5',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '',
node: document.getElementById('product-component-1720550087882'),
moneyFormat: '%7B%7Bamount_with_comma_separator%7D%7D',
options: {
"product": {
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px"
}
},
"button": {
"border-radius": "30px",
"padding-left": "28px",
"padding-right": "28px"
}
},
"buttonDestination": "checkout",
"contents": {
"img": false,
"title": false,
"price": false
},
"width": "280px",
"text": {
"button": "BESTELLEN"
}
},
"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": {
"border-radius": "30px",
"padding-left": "28px",
"padding-right": "28px"
}
},
"text": {
"button": "Add to cart"
}
},
"option": {},
"cart": {
"styles": {
"button": {
"border-radius": "30px"
}
},
"text": {
"title": "",
"total": "",
"empty": "",
"notice": "",
"button": ""
}
},
"toggle": {}
},
});
});
}
})();
/*]]>*/
</script>
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024