Shopify Buy Button

商品をウェブサイトやブログに掲載しよう

既存のウェブサイトに商品を掲載する

商品やコレクションを掲載する

Shopifyの専用コードを付け足すことで、商品の見せ方を変えることができます。

ショッピングカートを付け足す

既存のウェブサイトにスマホ対応のBuy Buttonを追加して、商品販売を始めましょう。

あなたのブランドのためのカスタマイズ

たった数クリックで、ストアに合った色を設定していただけます。

1 2 3 

<script type="text/javascript">
  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'embeds.myshopify.com',
      apiKey: '952162710f94aa7b7644b14b2a94f4a3',
      appId: '6',
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [3030475907],
        node: document.getElementById('product-component-05cfb487fb6'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
          "product": {
            "styles": {
              "button": {
                "background-color": "#292929",
                ":hover": {"background-color": "#464646"},
                ":focus": {"background-color": "#464646"}
              },
            }
          }
        }
      });
    });
  }

(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  window.ShopifyBuy && window.ShopifyBuy.UI ? ShopifyBuyInit() : 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;
  }
})();
</script>
<div id='product-component-05cfb487fb6'></div>