購入ボタンを作成する

このページはApr 19, 2024に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/online-sales-channels/buy-button/create-buy-buttonをご覧ください。

管理画面で購入ボタン販売チャネルを追加すると、商品やコレクションのための購入ボタンを作成できます。

購入ボタンを作成した後、自動的に生成されたコードをコピーし、ボタンを表示するウェブページまたはブログ記事にコードを追加します。たとえば、WordpressのブログやSquarespaceのウェブサイトに購入ボタンを追加することもできます。

ウェブサイトに埋め込んだ後、購入ボタンのデザインを変更することはできません。変更を行う場合は、チャネルに新しいボタンを作成し、元のコードを新しいコードに置き換えます。

目次

購入ボタンをカスタマイズ

購入ボタンの外観とその動作をカスタマイズすることができます。

  • その色
  • そのサイズ
  • そのフォント
  • ボタンがクリックされたときに発生するアクション
  • チェックアウトが新しいブラウザウィンドウで開いているかどうか

ボタンをカスタマイズすると、変更をプレビューできます。プレビューをクリックすると、購入ボタンの動作をテストできます。

レイアウトスタイル

購入ボタンのレイアウトを選択できます。

購入ボタンの利用可能なレイアウト
ベーシック 商品画像なしで購入ボタンを追加するには、このレイアウトを選択します。すでにオンラインで商品を表示しているものの、購入するためのボタンを追加する場合は、この手順をおすすめします。
クラシック 購入ボタンの横に商品画像と価格を表示するには、このレイアウトを選択します。このレイアウトは、ブログ記事などのクイック商品プレビューに役立ちます。
フルビュー 購入ボタンの横に商品画像、価格、説明を表示するには、このレイアウトを選択します。このレイアウトでは、オンラインストアの商品の詳細ページが表示されます。

購入ボタンのアクション

購入ボタンを作成すると、ボタンがクリックされたときに実行するアクションを選択できます。

購入ボタンがコレクション用の場合、アクションはコレクション内の各商品に適用されます。

  • [カートに商品を追加する] : ショッピングカートに商品を追加します。お客様は買い物を続け、追加の商品をカートに入れることができます。
  • [チェックアウトに移動する]: お客様は商品を購入できるチェックアウトに誘導されます。お客様は注文に商品をさらに追加することができなくなります。
  • [商品の詳細を開く]: [商品を見る] ボタンを表示します。お客様がボタンをクリックすると、商品の説明が表示され、利用可能な商品バリエーションを選択してカートに商品を追加できます。商品に複数の商品画像がある場合は、これらも表示されます。
    • [全表示] レイアウトには、すでにすべての商品の詳細が表示されているため、[全表示] レイアウトを選択した場合、このオプションを利用できません。

チェックアウトが新しいブラウザウィンドウで開くか、またはウェブサイトと同じタブで開くかを選択することもできます。デフォルトの動作では、チェックアウトが新しいウィンドウで開きます。

購入ボタンの外観

  • ボタンスタイルには、購入ボタンのボタン部分の形状、色、文字体裁が含まれています。
  • レイアウトでは、選択したレイアウトスタイルに応じて、ボタンのアラインメント、画像サイズ、ボタンのテキスト、フォント、色、サイズなどの設定をカスタマイズできます。

  • ショッピングカートには、埋め込まれたショッピングカートのテキストと色のオプションが含まれています。また、注文メモフィールド用のラベルを有効にしてカスタマイズすることもできます。注文メモを使用して、注文の準備や配送方法に関する特別な指示をお客様に入力してもらうことができます。追加情報フィールドを使用すると、お客様にメッセージを伝えることができます。

    • ショッピングカートの設定を編集できるのは、ボタンのアクションとして [商品をカートに追加する] または [商品の詳細を開く] を選択した場合のみです。

  • 詳細ポップアップには、商品の詳細ポップアップウィンドウの設定が含まれています。数量フィールドを表示するかどうかにかかわらず、ボタンのテキスト、バックグラウンドとラベルに使用される色、ラベルのフォントおよびフォントサイズをカスタマイズできます。[商品の詳細を開く] をボタンのアクションとして選択した場合にのみ、これらの設定を編集できます。

1つの商品に購入ボタンを作成する

1つの商品用の購入ボタンを作成できます。その購入ボタンに、商品のバリエーションの1つまたはすべてを含めることができます。購入ボタンを作成すると、レイアウトスタイルを選択して、ボタンの色、テキスト、外観、およびお客様がクリックしたときの動作をカスタマイズできます。購入ボタンのカスタマイズの詳細を確認する。

商品の購入ボタンを作成する前に、管理画面に商品を追加し、購入ボタンの販売チャネルで利用できるようにする必要があります。

手順:

  1. 管理画面から、[設定] > [アプリと販売チャネル] の順にクリックします。

  2. [アプリと販売チャネル] ページで、[Buy Button] をクリックします。

  3. [販売チャネルを開く] をクリックします。

  4. [購入ボタンを作成する] をクリックします。

  5. 商品購入ボタンをクリックします。

  6. カタログから商品を選択するか、検索を使用して商品を見つけます。[選択する] をクリックします。

  7. オプション: 購入ボタンをカスタマイズします。

    1. 商品にバリエーションがある場合は、[すべてのバリエーション] を選択するか、追加するバリエーションを選択します。
    2. お客様がボタンをクリックしたときのレイアウトスタイルとアクションを選択します。ボタンのデザインをカスタマイズすることもできます。
    3. デフォルトでは、チェックアウトの動作で新しいウィンドウが開きますが、ウェブサイトと同じブラウザタブでチェックアウトを開くことができます。[高度な設定] > 同じタブでリダイレクト をクリックします。

  8. [次へ] をクリックします。

  9. [コードをコピーする] をクリックします。

  10. 購入ボタンを表示するウェブページのHTMLエディタを開きます。「購入ボタンコードをHTMLに追加」を参照してください。

  11. 購入ボタンを表示するHTML内にコードを貼り付け、変更を保存します。

  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで [購入] ボタンをタップします。
  3. [購入ボタンを作成する] をクリックします。
  4. 商品購入ボタンをクリックします。
  5. カタログから商品を選択するか、検索を使用して商品を見つけます。[選択する] をクリックします。

  6. オプション: [カスタマイズ] をクリックします。

    1. 商品に複数のバリエーションがある場合は、[すべてのバリエーション] を選択するか、ドロップダウンリストからバリエーションを選択します。
    2. お客様がボタンをクリックしたときのレイアウトスタイルとアクションを選択します。ボタンのデザインをカスタマイズすることもできます。
    3. デフォルトでは、チェックアウトの動作で新しいウィンドウが開きますが、ウェブサイトと同じブラウザタブでチェックアウトを開くことができます。[高度な設定] > 同じタブでリダイレクト をクリックします。

  7. [完了] をクリックします。

  8. [コードをコピーする] をクリックします。

  9. 購入ボタンを表示するウェブページのHTMLエディタを開きます。「購入ボタンコードをHTMLに追加」を参照してください。

  10. 購入ボタンを表示するHTML内にコードを貼り付け、変更を保存します。

  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで [購入] ボタンをタップします。
  3. [購入ボタンを作成する] をクリックします。
  4. 商品購入ボタンをクリックします。
  5. カタログから商品を選択するか、検索を使用して商品を見つけます。[選択する] をクリックします。

  6. オプション: [カスタマイズ] をクリックします。

    1. 商品に複数のバリエーションがある場合は、[すべてのバリエーション] を選択するか、ドロップダウンリストからバリエーションを選択します。
    2. お客様がボタンをクリックしたときのレイアウトスタイルとアクションを選択します。ボタンのデザインをカスタマイズすることもできます。
    3. デフォルトでは、チェックアウトの動作で新しいウィンドウが開きますが、ウェブサイトと同じブラウザタブでチェックアウトを開くことができます。[高度な設定] > 同じタブでリダイレクト をクリックします。

  7. [完了] をクリックします。

  8. [コードをコピーする] をクリックします。

  9. 購入ボタンを表示するウェブページのHTMLエディタを開きます。「購入ボタンコードをHTMLに追加」を参照してください。

  10. 購入ボタンを表示するHTML内にコードを貼り付け、変更を保存します。

コレクション用の購入ボタンを作成する

コレクション用の購入ボタンを作成すると、実際にはコレクション内の各商品のボタンが作成されます。

購入ボタンを作成すると、レイアウトスタイルを選択して、ボタンの色、テキスト、外観、およびお客様がクリックしたときの動作をカスタマイズできます。購入ボタンのカスタマイズの詳細を確認する。

コレクション用の購入ボタンを作成する前に、以下の手順が必要です。

手順:

  1. 管理画面から、[設定] > [アプリと販売チャネル] の順にクリックします。

  2. [アプリと販売チャネル] ページで、[Buy Button] をクリックします。

  3. [販売チャネルを開く] をクリックします。

  4. [購入ボタンを作成する] をクリックします。

  5. コレクション購入ボタンをクリックします。

  6. コレクションを選択するか、検索を使用してコレクションを探します。[選択] をクリックします。

  7. オプション: 購入ボタンをカスタマイズします。

    1. お客様がボタンをクリックしたときに発生するアクションを選択します。ボタンのデザインをカスタマイズすることもできます。
    2. デフォルトでは、チェックアウトの動作で新しいウィンドウが開きますが、ウェブサイトと同じブラウザタブでチェックアウトを開くことができます。[高度な設定] > 同じタブでリダイレクト をクリックします。

  8. [次へ] をクリックします。

  9. [コードをコピーする] をクリックします。

  10. 購入ボタンを表示するウェブページのHTMLエディタを開きます。「購入ボタンコードをHTMLに追加」を参照してください。

  11. 購入ボタンを表示するHTML内にコードを貼り付け、変更を保存します。

  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで [購入] ボタンをタップします。
  3. [購入ボタンを作成する] をクリックします。
  4. コレクション購入ボタンをクリックします。
  5. コレクションを選択するか、検索を使用してコレクションを探します。[選択] をクリックします。

  6. オプション: [カスタマイズ] をクリックします。

    1. お客様がボタンをクリックしたときに発生するアクションを選択します。ボタンのデザインをカスタマイズすることもできます。
    2. デフォルトでは、チェックアウトの動作で新しいウィンドウが開きますが、ウェブサイトと同じブラウザタブでチェックアウトを開くことができます。[高度な設定] > 同じタブでリダイレクト をクリックします。

  7. [完了] をクリックします。

  8. [コードをコピーする] をクリックします。

  9. 購入ボタンを表示するウェブページのHTMLエディタを開きます。「購入ボタンコードをHTMLに追加」を参照してください。

  10. 購入ボタンを表示するHTML内にコードを貼り付け、変更を保存します。

  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで [購入] ボタンをタップします。
  3. [購入ボタンを作成する] をクリックします。
  4. コレクション購入ボタンをクリックします。
  5. コレクションを選択するか、検索を使用してコレクションを探します。[選択] をクリックします。

  6. オプション: [カスタマイズ] をクリックします。

    1. お客様がボタンをクリックしたときに発生するアクションを選択します。ボタンのデザインをカスタマイズすることもできます。
    2. デフォルトでは、チェックアウトの動作で新しいウィンドウが開きますが、ウェブサイトと同じブラウザタブでチェックアウトを開くことができます。[高度な設定] > 同じタブでリダイレクト をクリックします。

  7. [完了] をクリックします。

  8. [コードをコピーする] をクリックします。

  9. 購入ボタンを表示するウェブページのHTMLエディタを開きます。「購入ボタンコードをHTMLに追加」を参照してください。

  10. 購入ボタンを表示するHTML内にコードを貼り付け、変更を保存します。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す