Streaming live at 10am (PST)

Adding shopify products to webflow


#1

I have watched the tutorials but in every video the code seems to be very different to the one i am getting.
Can someone help me out in finding the "product ID" and the "product handle"

Heres the html button

<div id='product-component-b971b38fcdd'></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: 'gentech-co.myshopify.com',
apiKey: 'cda631e7a4802246ce4b97c710b1332b',
appId: '6',
});

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    id: [9626388108],
    node: document.getElementById('product-component-b971b38fcdd'),
    moneyFormat: 'Rs.%7B%7Bamount%7D%7D',
    options: {

"product": {
"variantId": "all",
"width": "240px",
"contents": {
"img": false,
"title": false,
"variantTitle": false,
"price": false,
"description": false,
"buttonWithQuantity": false,
"quantity": false
},
"styles": {
"product": {
"text-align": "left",
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0",
"margin-bottom": "50px"
}
},
"button": {
"background-color": "#51a6db",
"font-family": "Montserrat, sans-serif",
":hover": {
"background-color": "#4995c5"
},
"font-weight": "normal",
":focus": {
"background-color": "#4995c5"
}
},
"title": {
"font-size": "26px"
},
"price": {
"font-size": "18px"
},
"compareAt": {
"font-size": "15px"
}
},
"googleFonts": [
"Montserrat"
]
},
"cart": {
"contents": {
"button": true
},
"styles": {
"button": {
"background-color": "#51a6db",
"font-family": "Montserrat, sans-serif",
":hover": {
"background-color": "#4995c5"
},
"font-weight": "normal",
":focus": {
"background-color": "#4995c5"
}
},
"footer": {
"background-color": "#ffffff"
}
},
"googleFonts": [
"Montserrat"
]
},
"modalProduct": {
"contents": {
"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": "#51a6db",
"font-family": "Montserrat, sans-serif",
":hover": {
"background-color": "#4995c5"
},
"font-weight": "normal",
":focus": {
"background-color": "#4995c5"
}
}
},
"googleFonts": [
"Montserrat"
]
},
"toggle": {
"styles": {
"toggle": {
"font-family": "Montserrat, sans-serif",
"background-color": "#51a6db",
":hover": {
"background-color": "#4995c5"
},
"font-weight": "normal",
":focus": {
"background-color": "#4995c5"
}
}
},
"googleFonts": [
"Montserrat"
]
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
}
}
});
});
}
})();
/*]]>*/

Thanks


Here is my public share link: LINK
(how to access public share link)


#2

Just diving into the world of Shopify but it seems that "9626388108" and "b971b38fcdd" might be the ID and Handle you are looking for.

To test the theory, create two separate products with the same button and cart attributes. Generate the code and find what two things are different.


#3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.