Make buy button images clickable

Highlighted
New Member
3 0 1

Hi we need to make the images generated by the Buy Button generator clickable so that they go to the same link as the View Product button.

This needs to work not only for individual products but for collections too.

1 Like
Highlighted
Explorer
297 0 25

Can you share the "Buy Button" code that is being generated?

I make apps and can help you in setting up payment gateways..
0 Likes
Highlighted
New Member
3 0 1

Here is the code for a collection and thanks for your interest:

 

<div id='collection-component-5581713c70f'></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: 'amazingoils.myshopify.com',
apiKey: '260d45e968e803d81436fc4a1a8361fb',
appId: '6',
});

ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('collection', {
id: 426606414,
node: document.getElementById('collection-component-5581713c70f'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"variantId": "all",
"contents": {
"imgWithCarousel": false,
"variantTitle": false,
"description": false,
"buttonWithQuantity": false,
"quantity": false
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px"
}
}
}
},
"cart": {
"contents": {
"button": true
},
"styles": {
"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

0 Likes
Highlighted
Explorer
297 0 25

@Trevor, the entire element is being generated from a function. There is nothing that can be done from Shopify's end. It can be implemented on the page where you are embedding the buy now button.

I make apps and can help you in setting up payment gateways..
0 Likes
Highlighted
New Member
1 0 0

This is a great idea and an enhancement of the function would be appreciated. In terms of ergonomics it's necessary to make images clickable for users, and before buying it's necessary to give access to the details of the product!

0 Likes