How to get the ID required for a shopify buy button?

Question

How can I get a shopify products resource id? In one of their blog posts here (scroll down to this section, 3. Creating a component) they suggest it looks like this, id: 1234567

ui.createComponent('product', {
  id: 1234567,
  node: document.getElementById('my-product')
});

How does one get this value? id: 1234567

When I click on the link in the article on how to find a resource ID I am taken here, which then takes me here.

I am trying to build a shopify buy button with a mini cart on my wordpress site. Shopify gives me out of the box generated code for each product that looks like this:

<div id='product-component-a3721b1ed3e' ></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: 'my-shop.com',
          storefrontAccessToken: 'my-token',
        });

        ShopifyBuy.UI.onReady(client).then(function (ui) {

          ui.createComponent('product', {
            id: [12345667820298],
            node: document.getElementById('product-component-a3721b1ed3e'),
            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": "100%",
                    "margin-left": "0",
                    "margin-bottom": "50px"
                  }
                },
                "title": {
                  "font-size": "26px"
                },
                "price": {
                  "font-size": "18px"
                },
                "compareAt": {
                  "font-size": "15px"
                }
              }
            },
            "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-left": "0px",
                    "margin-bottom": "0px"
                  }
                }
              }
            },
            "productSet": {
              "styles": {
                "products": {
                  "@media (min-width: 601px)": {
                    "margin-left": "-20px"
                  }
                }
              }
            }
          }
          });
        });
      }
    })();
    /*]]>*/
</script>

It looks like this is the ID per product I want:

      ui.createComponent('product', {
        id: [12345667820298],

I just do not know how to get it.

Answer 1

Yes, this is the ID. If You generate the buy button, you get the id. No further action required. This id also shows up in the URLs. For example in the backend go to products - all Products and click one product. The URL now ends with the id.

I think it's confusing. Their exists handles (derivied from the product name), this variant ids and the ids used in the APIs.