Using Shopify buy buttons to direct to product page

Seaveg
New Member
1 0 0
 

Problem: We, like many people I would imagine, like the ease of use of the shopify buy buttons, but run into the trouble of the duel cart phenomenon which is why Shopify does not recommend the use of buy buttons on Shopify blogs.

That said, we want to find a solution to embed items or collections into our blog posts.

Is there a way to hijack this code that creates the view product button that creates "the popup window that has the buy button" to redirect to our product page instead? It seems crazy to me that Shopify offers no solution to sell products on blog posts.

<div id='product-component-1634317038746'></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: 'seaveg.myshopify.com',
storefrontAccessToken: 'c15d93e7af1d2ef314e6774984cabd6a',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '4200366276686',
node: document.getElementById('product-component-1634317038746'),
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"
}
},
"button": {
":hover": {
"background-color": "#09466f"
},
"background-color": "#0a4e7b",
":focus": {
"background-color": "#09466f"
},
"border-radius": "12px",
"padding-left": "47px",
"padding-right": "47px"
}
},
"buttonDestination": "modal",
"contents": {
"options": false
},
"text": {
"button": "View product"
}
},
"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": "#09466f"
},
"background-color": "#0a4e7b",
":focus": {
"background-color": "#09466f"
},
"border-radius": "12px",
"padding-left": "47px",
"padding-right": "47px"
}
},
"text": {
"button": "Add to cart"
}
},
"option": {},
"cart": {
"styles": {
"button": {
":hover": {
"background-color": "#09466f"
},
"background-color": "#0a4e7b",
":focus": {
"background-color": "#09466f"
},
"border-radius": "12px"
}
},
"text": {
"total": "Subtotal",
"button": "Checkout"
}
},
"toggle": {
"styles": {
"toggle": {
"background-color": "#0a4e7b",
":hover": {
"background-color": "#09466f"
},
":focus": {
"background-color": "#09466f"
}
}
}
}
},
});
});
}
})();
/*]]>*/
</script>

dulse granuls.png

 

 

Replies 0 (0)