HTML に購入ボタンのコードを追加する

管理画面で購入ボタンを作成すると、ご自身のウェブサイトやブログに追加できるようになります。

ウェブサイトのソース HTML に埋め込みコードを追加する手順は、購入ボタンとカートを表示する方法と場所、利用している公開プラットフォーム、また場合によってはそのプラットフォームで利用しているテーマによって多少異なります。

このページの内容

WordPress に埋め込みコードを追加する

WordPress サイトの投稿、ページ、またはテンプレートに埋め込みコードを追加できます。

WordPress の投稿またはページに埋め込みコードを追加する

Shopify で購入ボタンを作成し、[埋め込みコード] ダイアログからその埋め込みコードをコピーします (または [クリップボードに埋め込みコードをコピー] をクリックします)。
WordPress のダッシュボードから、投稿またはページに移動します。
新しい投稿やページを作成するか、既存のものを編集します。
ブロックエディタ内で [+] ボタンをクリックし、カスタム HTML を検索してから、クリックしてカスタム HTML ブロックを挿入します。
カスタム HTML ブロックで提供されるテキストフィールドに、埋め込みコードを貼り付けます。
任意：カスタム HTML ブロックを移動するか、購入ボタンの表示をプレビューします。
- カスタム HTML ブロックを移動するには、ブロックのツールバーにある矢印ボタンをクリックするか、ブロックを新しい場所にドラッグします。
- 購入ボタンをプレビューするには、ブロックツールバーで [プレビュー] をクリックします。
完了したら、投稿またはページの [下書き保存]、[プレビュー]、または [公開] ボタンをクリックします。

WordPress のクラシックエディタプラグインを使用している場合は、カスタム HTML ブロックを使用する代わりに、テキストエディタをビジュアルモードからテキストモードに変更して、エディタに埋め込みコードを貼り付けます。

WordPress のテンプレートに埋め込みコードを追加する

お使いの WordPress テーマがサイトエディタに対応している場合、サイトのいずれかのテンプレートに埋め込み式の購入ボタンを追加できます。

手順：

Shopify で購入ボタンを作成し、[埋め込みコード] ダイアログからその埋め込みコードをコピーします (または [クリップボードに埋め込みコードをコピー] をクリックします)。
WordPress のダッシュボードで、[エディタ] に移動します。
編集するテンプレートに移動します。
ブロックエディタ内で [+] ボタンをクリックし、カスタム HTML を検索してから、クリックしてカスタム HTML ブロックを挿入します。
カスタム HTML ブロックで提供されるテキストフィールドに、埋め込みコードを貼り付けます。
任意：カスタム HTML ブロックを移動するか、購入ボタンの表示をプレビューします。
- カスタム HTML ブロックを移動するには、ブロックのツールバーにある矢印ボタンをクリックするか、ブロックを新しい場所にドラッグします。
- 購入ボタンをプレビューするには、ブロックツールバーで [プレビュー] をクリックします。
完了したら、テンプレートの [プレビュー] または [保存] ボタンをクリックします。

Shopify ブログに埋め込みコードを追加する

注：

手順：

デスクトップ

管理画面から、[コンテンツ] > [ブログ記事] に移動します。
[ブログ記事] ページで、編集するブログ記事のタイトルをクリックするか、[ブログ記事を追加する] をクリックして新しい記事を作成します。
[ブログ記事を作成] セクションで、リッチテキストエディタの [HTML を表示する] をクリックします。
メインテキストフィールドに埋め込みコードを貼り付けます。
[保存] をクリックします。

モバイル

Shopify app から、アイコンをタップします。
[コンテンツ] メニューでアイコンをタップしてから、[ブログ記事] をタップします。
編集するブログ記事をタップします。
[コンテンツ] セクションで、[…] をタップしてから、アイコンをタップします。
テキストフィールドに埋め込みコードを貼り付けます。
[保存] または [✓] をタップします。

Squarespace に埋め込みコードを追加する

Squarespace の個々の投稿やホームページのメニューに埋め込みコードを追加できます。場合によっては、両方を行う必要があります。たとえば、ホームページにカートを埋め込むことで、個別の投稿に埋め込んだ購入ボタンからの購入を受け付けることができます。

手順：

Squarespace のダッシュボードから、埋め込みコードを追加するウェブページを開きます。
購入ボタンまたは埋め込みカートを表示するページの要素を見つけ、カーソルを [ページコンテンツ] エリアに移動してから、[編集] をクリックします。
埋め込みコードを追加する挿入ポイントをクリックします。
[コンテンツブロック] ダイアログの [その他] セクションで、[コード] をクリックします。
管理画面から、[埋め込みコード] ダイアログで埋め込みコードをコピーします。
Squarespace のダッシュボードから、[コード] ダイアログに埋め込みコードを貼り付けます。テキストフィールドが HTML を受け取るように設定されていることを確認してください。
「コードを編集」ダイアログで、「適用」をクリックします。
Squarespace のダッシュボードでは JavaScript が無効になっているため、購入ボタンや埋め込みカートが機能していることを確認するには、ページを別途プレビューする必要があります。ページエディタで再度「保存」をクリックします。

手順を完了しても購入ボタンが読み込まれない場合は、Ajax ローディングを無効にする必要がある場合があります。詳細については、Ajax を有効または無効にするを参照してください。

Wix への埋め込みコードの追加

管理画面で購入ボタンまたはコレクションを作成した後、Wix Website Editor を使用して Wix ウェブサイトに追加できます。

埋め込みコードを編集せずに Wix ウェブサイトで複数の商品を表示したい場合は、コレクションを埋め込むことができます。管理画面で、Wix に表示したい商品の新しいコレクションを作成できます。

手順：

管理画面から商品またはコレクションの購入ボタンを作成し、その埋め込みコードをコピーします。

Wix アカウントの「マイサイト」セクションで編集するサイトを見つけ、「サイトを編集」をクリックします。
Wix Website Editor で、+ ボタンをクリックしてから「その他」をクリックします。
「HTML コード」をクリックして、HTML コードウィジェットをページに追加します。
「コードを入力」をクリックします。
「HTML 設定」ダイアログの「ここにコードを追加」フィールドに購入ボタンまたはコレクションの埋め込みコードを貼り付け、「更新」をクリックします。
HTML コードウィジェットのサイズを、コンテンツに合わせて変更します。カート付きの埋め込みを作成している場合は、カートのタブが正しい場所に表示されるようにしてください。
完了したら、「保存」をクリックします。

複数の商品またはコレクションを埋め込む

手順：

管理画面から商品またはコレクションの購入ボタンを作成し、その埋め込みコードをコピーします。
コードをコードエディタまたは Wix のウェブサイトビルダーに貼り付けます。必要な購入ボタンを作成するまで、最初の2つの手順を繰り返します。
埋め込みコードを編集して、適切な配置で表示されるようにします。
Wix アカウントの「マイサイト」セクションで編集するサイトを見つけ、「サイトを編集」をクリックします。
Wix Website Editor で、+ ボタンをクリックしてから「その他」をクリックします。
「HTML コード」をクリックして、HTML コードウィジェットをページに追加します。
「コードを入力」をクリックします。
「HTML 設定」ダイアログの「ここにコードを追加」フィールドに、編集した購入ボタンのコードを貼り付け、「更新」をクリックします。
HTML コードウィジェットのサイズを、コンテンツに合わせて変更します。カート付きの埋め込みを作成している場合は、カートのタブが正しい場所に表示されるようにしてください。
完了したら、「保存」をクリックします。

スクリプトタグを個別に追加する

一部のプラットフォーム (Unbounce など) では、埋め込みコードの <script> タグをページのヘッダーに貼り付け、残りの埋め込みコードを購入ボタンを表示するページに貼り付ける必要があります。

手順：

購入ボタンを作成したときに生成された埋め込みコードから、<div> 要素と <script> 要素の両方をコピーします。以下に例を示します。

<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: 'haris-mahmood.myshopify.com',
      apiKey: 'a4e6808b1c4afa490c5b7459f7758347',
      appId: '15'
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [9017131142],
        node: document.getElementById('product-component-2dd3c8704e6'),
        moneyFormat: '%24%24%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "variantId": "all",
    "contents": {
      "variantTitle": false,
      "description": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      }
    }
  },
  "cart": {
    "contents": {
      "button": true
    },
    "styles": {
      "footer": {
        "background-color": "#ffffff"
      }
    }
  },
  "modalProduct": {
    "contents": {
      "variantTitle": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      }
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/
</script>

購入ボタンを埋め込むウェブサイトのページヘッダーを開きます。
<script> 要素全体をページヘッダーに貼り付けます。
変更を保存します。
管理画面の元の埋め込みコードから、<div> 要素のみをコピーします。以下に例を示します。

<div id='product-component-2dd3c8704e6'></div>

購入ボタンを埋め込むウェブサイトのページを開きます。
<div> コードスニペットをページに貼り付けます。
変更を保存します。