Shopify Buy Button JS

by Louis Walch

HTML

<script src="https://sdks.shopifycdn.com/buy-button/latest/buybutton.js"></script>
<div id="product"></div>

CSS

BODY {
    background-color: #ccc;
}

JavaScript

// Useful:
// https://www.youtube.com/watch?v=CGk_cNi4PRY

var client = ShopifyBuy.buildClient({
  storefrontAccessToken: '000c466acdae9d636abd01288f079249',
  domain: 'shopifystockroom.myshopify.com',
  appId: '6'
});

var ui = ShopifyBuy.UI.init(client);

var button_styles = {
	'background-color' : 'red',
    'border-radius': '30px',
    ':hover': {
    	'background-color' : 'blue'
    },
    ':focus': {
    	'background-color' : 'blue'
    }
}

ui.createComponent('product', {
  id: 7033846211,
  node: document.getElementById('product'),
  options: {
    product: {
      layout: 'horizontal',
      contents: {
      },
      order: [
        'img',
        'title',
        'price',
        'options',
        'button',
      ],      
      text: {
        button: 'Buy Now'
      },
      buttonDestination: 'checkout',
      styles: {
      	button: button_styles,
      }
    },
  }
}).then((res) => {
  const iframe = document.querySelector('#product iframe').contentDocument;
// iframe.querySelector('.shopify-buy__product__title').innerHTML = 'hello world';

var new_div = document.createElement('h1');

new_div.innerHTML = 'hello world';

// iframe.body.appendChild(new_div);

iframe.body.insertBefore(new_div, iframe.body.firstChild);

});