Shopify “Buy Button” の連携

Shopify の Buy Button を利用して、外部サイト（例：WordPress）に商品を埋め込む方法について説明します。

Shopify の初期設定

Shopify にサインアップし、初期設定を行います。

  1. サインアップ: https://www.shopify.com/
  2. 初期設定を完了します。詳細については、Shopify
    の公式ガイド「販売を開始するための設定」を参照してください: Getting set
    up to start selling

テストモードを有効にする

テストモードを有効にすることで、実際に決済を行わずに Buy Button
の動作を確認できます。

  1. [設定] に移動します
  2. [決済プロバイダ] をクリックします
  3. ページの一番下までスクロールします
  4. テストモードを有効にする
    にチェックを入れ、[保存] ボタンをクリックします
  5. 「テストモード」がオンになっていることを確認します

Buy Button を作成する

  1. 管理画面に戻り、[Buy Button を作成] をクリックします
  2. [商品 Buy Button] または [コレクション Buy Button] を選択します
  3. 該当の商品を確認し、[選択] ボタンをクリックします
  4. [次へ] ボタンをクリックします
  5. [コードをコピー]
    ボタンをクリックして、生成されたコードをコピーします
  6. … コピー完了
  7. [終了] をクリックします

WordPress ページに Buy
Button を追加する

ここでは、例として WordPress ページに Buy Button
を追加する手順を説明します。


  1. Shifter ダッシュボードで WordPress を起動し、WordPress
    ダッシュボードにログインします: https://go.getshifter.io/



  2. 新しいページまたは投稿を追加します



  3. 「カスタム HTML」を追加します



  4. コピーした Buy Button の JavaScript コードを貼り付けます 



    <!-- Buy Button のコードをここに貼り付けます -->



  5. 公開します



  6. Shifter ダッシュボードに戻り、Artifact を生成します


Buy Button
が動作することを確認する

  1. Buy Button のページ (例: https://example.com/shopify-buybutton/)
    に移動します。
  2. 商品の [カートに追加] ボタンをクリックします
  3. 商品がカートに追加されます
  4. チェックアウトを完了し、成功します

テストモードを無効にする

動作確認が完了したら、テストモードを無効にして、実際の決済を受け付けられるようにします。

  1. Shopify 管理画面に戻ります
  2. [設定] をクリックします
  3. [決済プロバイダ] をクリックします
  4. 「テストモードをオフにする」をクリックします
  5. 「テストモード」を無効にし、ショップサイトを公開します
  6. 「テストモード」がオフになっていることを確認します

以上です！