Creating an add on item with Shopify's Buy Button

Question

I am using Shopify's Buy Button on my page and I am pretty happy with it, but I need to add the ability to create an "add on item" - meaning when a customer clicks for the product details on an item that items offers the ability to have an add on item with it.

Much like this plugin: https://spice-addons-demo.myshopify.com/collections/frontpage/products/the-sg-gems-necklace (I've already tried to implement it, no luck)

How can I do this with the Buy Button? (Documentation here: http://shopify.github.io/buy-button-js/, I've tried to modify it but haven't really had any luck)

Here is my code:

/*<![CDATA[*/
(function () {
  var scriptURL = 'js/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: 'xxx',
      storefrontAccessToken: 'xxx',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('collection', {
        id: '230096961724',
        node: document.getElementById('xxx'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
  "product": {   
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(33.33333% - 30px)",
          "margin-left": "30px",
          "margin-bottom": "50px",
          "width": "calc(33.33333% - 30px)"
        },
        "img": {
          "height": "calc(100% - 15px)",
          "position": "absolute",
          "left": "0",
          "right": "0",
          "top": "0"
        },
        "imgWrapper": {
          "padding-top": "calc(75% + 15px)",
          "position": "relative",
          "height": "0"
        }
      },
      "button": {
        "font-weight": "bold",
        "font-size": "18px",
        "padding-top": "17px",
        "padding-bottom": "17px",
        ":hover": {
          "background-color": "#8b1a23"
        },
        "background-color": "#ca0027",
        ":focus": {
          "background-color": "#8b1a23"
        },
        "border-radius": "7px",
        "padding-left": "100px",
        "padding-right": "100px"
      },
      "quantityInput": {
        "font-size": "18px",
        "padding-top": "17px",
        "padding-bottom": "17px"
      }
    },
    "buttonDestination": "modal",
    "contents": {
      "options": false
    },
    "text": {
      "button": "View product"
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-30px"
        }
      }
    }
  },
  "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": {
        "font-weight": "bold",
        "font-size": "18px",
        "padding-top": "17px",
        "padding-bottom": "17px",
        ":hover": {
          "background-color": "#8b1a23"
        },
        "background-color": "#ca0027",
        ":focus": {
          "background-color": "#8b1a23"
        },
        "border-radius": "7px",
        "padding-left": "100px",
        "padding-right": "100px"
      },
      "quantityInput": {
        "font-size": "18px",
        "padding-top": "17px",
        "padding-bottom": "17px"
      }
    },
    "text": {
      "button": "Add to cart"
    }
  },
  "cart": {
    "styles": {
      "button": {
        "font-weight": "bold",
        "font-size": "18px",
        "padding-top": "17px",
        "padding-bottom": "17px",
        ":hover": {
          "background-color": "#8b1a23"
        },
        "background-color": "#ca0027",
        ":focus": {
          "background-color": "#8b1a23"
        },
        "border-radius": "7px"
      }
    },
    "text": {
      "total": "Subtotal",
      "button": "Checkout"
    },
    "popup": false
  },
  "toggle": {
    "styles": {
      "toggle": {
        "font-weight": "bold",
        "background-color": "#ca0027",
        ":hover": {
          "background-color": "#8b1a23"
        },
        ":focus": {
          "background-color": "#8b1a23"
        }
      },
      "count": {
        "font-size": "18px"
      }
    }
  }
},
      });
    });
  }
})();
/*]]>*/

Answer 1

A buy button is not customizable. It represents a single variant your customer can buy. So you cannot add other products to it. You could bundle those extras in new cohesive product, and then sell that with a button, but then your library of buttons becomes larger and perhaps that idea ruins your inventory managment too, so there you go.

Your only real recourse is to leverage StorefrontAPI, and some custom JS to build your own button that manages more than a single product. With that, you could build a button that sends a customer to a checkout with one product and perhaps an extra associated one.