JSFiddle - React, Tailwind, and code Playground

by Cam Gould

HTML

<div id="collection"></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
  /****************************************************
  * Settings:
  * Here's where we set up the custom elements for this embedded collection
  * - Change "showVariants" to true to show an option selector
  ****************************************************/
  var collection = 209222341
      store = 'merchline.myshopify.com'
      token = '27da9fa5ba0d9cbc5991cb3898096fd0'
      showVariants = false
      showCarousel = true
      buttonColor = '#5611E1'
      buttonHover = '#3C12BB'
      buttonRoundness = 2
      buttonText = 'More info'
  /****************************************************
  * Don't change the code below this point
  ****************************************************/
  var showImg=false;if(showCarousel==false){var showImg=true}
  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:store,storefrontAccessToken:token});
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('collection', {
        id: collection,
        node: document.getElementById('collection'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
          "product": {
            "buttonDestination": "onlineStore",
            "contents": {
              "img": showImg,
              "imgWithCarousel": showCarousel,
              "variantTitle": false,
              "options": showVariants,
              "description": false,
             ...