Variable Buy Button on all Product pages

Variable Buy Button on all Product pages

Mark1988
Excursionist
43 0 5

Hi there,

 

I was looking to add a variable/dynamic 'Buy Button' for on the product pages. This because the Theme i have is ony showing 'Add to Cart' on the Product page. This is creating an 'extra step' in the process, because then first customers need to go to their cart and then click 'order'. Therefore want to also add the 'buy button' on the product pages 'Order', as well.

 

In my search it leads me to this Shopify app, called: Buy Button channel. However the problem with this app that it's more specified for Blogs and only do 1 product or 1 product collection, but what is needed is a variable/dynamic buy button that detects on which product page it is, does that in the basket and go to checkout, the moment you click on the buy button 'order'.

 

Is there anyone here knows how to make it variable/dynamic and where to put it in the Theme code? Also can do it as HTML code as a Section block, but then most likely the positioning is not so nice.

 

https://apps.shopify.com/buy-button?locale=nl&search_id=efb5711b-343e-4e5a-bb79-039a66c62732&surface...

 

In below i have already the Script code of the Button, from this Shopify App. However it was specific on 1 single product ID. Many thanks in advance.

 

<div id='product-component-1720550087882'></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: 'kadoing.myshopify.com',

      storefrontAccessToken: '84ed3b19a242df9b934f41ac0e4fedd5',

    });

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

      ui.createComponent('product', {

        id: '',

        node: document.getElementById('product-component-1720550087882'),

        moneyFormat: '%7B%7Bamount_with_comma_separator%7D%7D',

        options: {

  "product": {

    "styles": {

      "product": {

        "@media (min-width: 601px)": {

          "max-width": "calc(25% - 20px)",

          "margin-left": "20px",

          "margin-bottom": "50px"

        }

      },

      "button": {

        "border-radius": "30px",

        "padding-left": "28px",

        "padding-right": "28px"

      }

    },

    "buttonDestination": "checkout",

    "contents": {

      "img": false,

      "title": false,

      "price": false

    },

    "width": "280px",

    "text": {

      "button": "BESTELLEN"

    }

  },

  "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": {

        "border-radius": "30px",

        "padding-left": "28px",

        "padding-right": "28px"

      }

    },

    "text": {

      "button": "Add to cart"

    }

  },

  "option": {},

  "cart": {

    "styles": {

      "button": {

        "border-radius": "30px"

      }

    },

    "text": {

      "title": "",

      "total": "",

      "empty": "",

      "notice": "",

      "button": ""

    }

  },

  "toggle": {}

},

      });

    });

  }

})();

/*]]>*/

</script>

Replies 0 (0)