ウェブサイトに購入ボタンまたは埋め込みコレクションを追加する

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

購入ボタンの例

購入ボタンを作成する方法は2つあります。

  • ウェブページのHTMLに埋め込むための、ページに購入ボタンが表示されるコードを生成します。購入ボタンの外観をカスタマイズし、Shopifyのチェックアウト、ショッピングカート、または商品説明にリンクすることができます。購入ボタンのコードは、1つの商品またはコレクションを特集することができます。

  • チェックアウトのリンクを生成して、メールキャンペーン、ダイレクトメッセージ、またはソーシャルメディアの投稿に追加することができます。

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

1つまたはすべての商品バリエーションを含む1つの商品を特集する購入ボタンを作成することができます。購入ボタンを作成すると、テンプレートを選択して、ボタンの色、テキスト、外観、およびお客様がクリックしたときの動作をカスタマイズできます。購入ボタンのカスタマイズについて詳しく知る。

手順:

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

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

  3. 商品に複数のバリエーションがある場合は、[すべてのバリエーション] を選択するか、ドロップダウンリストからバリエーションを選択します。

  4. テンプレートを選択して、ボタンの色、テキスト、外観、およびお客様がクリックしたときの動作をカスタマイズします。

    [購入] ボタンの作成

    購入ボタンをカスタマイズできるさまざまな方法の詳細については購入ボタンをカスタマイズを参照してください。

  5. [コードを生成する] をクリックします。

  6. コードをコピーするには [コードをクリップボードにコピー] をクリックします。

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

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

埋め込みコレクションを作成する

購入ボタンでコレクション内の商品を特集する埋め込みコレクションを作成することができます。

埋め込みコレクションは独自の購入ボタンを使用してコレクション内の各商品を表示するので、お客様はそのコレクションから任意の商品を選択することができます。埋め込みコレクションを作成するときは、特集商品の購入ボタンの色、テキスト、外観、およびお客様がボタンをクリックしたときの動作をカスタマイズできます。コレクション内の各商品のボタンは同じカスタマイズが使用されます。購入ボタンのカスタマイズについて詳しく知る。

手順:

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

  2. [コレクション] をクリックします。

  3. コレクションを選択し、[コレクションを選択] をクリックします。

  4. ボタンの色、テキスト、外観、およびお客様がクリックしたときの動作をカスタマイズします。

    購入ボタンをカスタマイズできるさまざまな方法の詳細については購入ボタンをカスタマイズを参照してください。

  5. [コードを生成する] をクリックします。

  6. コードをコピーするには [コードをクリップボードにコピー] をクリックします。

  7. 埋め込みコレクションを表示するウェブページのHTMLエディタを開きます。購入ボタンコードをHTMLに追加を参照してください。

  8. 埋め込みコレクションを表示する場所のHTMLに埋め込みコードを貼り付け、変更を保存します。

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

購入ボタンの色、サイズ、外観をカスタマイズし、ボタンをクリックしたときの動作を選択することもできます。1つの商品の購入ボタンを作成する場合は、購入ボタンのテンプレートを選択することもできます。作成ページから、コードを生成する前に選択をプレビューできます。

購入ボタンのテンプレート

1つの商品の購入ボタンを作成する場合、次のテンプレートから選択できます。

ボタン付き商品画像のアイコン 基本テンプレート このテンプレートを選択して、購入ボタンの横に商品画像と価格を表示します。
丸いボタンのみのアイコン ボタンテンプレート このテンプレートを選択して、商品画像なしで購入ボタンを追加します。すでに他の場所にオンラインで商品を表示しており、チェックアウトのリンクを追加する場合、こちらを使用することができます。
右側にテキストとボタンがある商品画像のアイコン 拡張テンプレート このテンプレートを選択して、購入ボタンの横にある商品画像、価格、説明を表示します。

購入ボタンのアクション

購入ボタンを作成すると、クリックでアクションリストからアクションを選択できます。ページ上の購入ボタンをクリックすると、次のいずれかが実行されます。

  • [カートに商品を追加する] : ショッピングカートに商品を追加します。お客様は買い物を続け、追加の商品をカートに入れることができます。
  • [買い物客にチェックアウトをダイレクトする] : お客様を商品を購入できるチェックアウトに直接誘導します。お客様は注文に商品をさらに追加することができなくなります。
  • [商品の詳細を表示] : [カートに追加する] ボタンで商品の説明を表示します。複数の商品画像がある場合、その画像も表示されます。

購入ボタンのサイズとアラインメント

購入ボタンの部品のサイズと位置は、サイズアラインメントのドロップダウンメニューから選択できます。購入ボタンをプレビューするとウェブページに最適なオプションを決定するのに役立ちます。

購入ボタンの外観

  • [ボタンスタイルとテキスト]: 購入ボタンのボタン部分でのスタイルや色のオプションです。
  • [フォントスタイル] : 購入ボタンのテキストとその商品情報に関するフォントや色のオプションです。
  • [ショッピングカート]: 埋め込みショッピングカートのテキストとカラーオプションです。

チェックアウトリンクを作成する

購入ボタンチャネルをインストールしたら、商品のチェックアウトリンクを作成することができます。お客様は、チェックアウトリンクをクリックして、1つの商品バリエーションをチェックアウトに追加できます。メールメッセージ、ソーシャルメディアの投稿、またはダイレクトメッセージでチェックアウトリンクを共有することができます。

商品の詳細ページからチェックアウトリンクを作成します。

手順:

  1. 商品に移動し、共有したい商品をクリックして詳細を表示します。

  2. 商品の詳細ページで、[その他の操作] ドロップダウンメニューをクリックします。

  3. [チェックアウトリンクを作成する] をクリックします。

  4. 商品に複数のバリエーションがある場合はバリエーションを選択します。各チェックアウトリンクは1つの商品バリエーションのみを特集することができます。

  5. リンクをコピーするには、[リンクをコピーする] をクリックします。

  6. メッセージ、メール、ソーシャルメディア投稿にリンクを直接貼り付けます。

チェックアウトリンクを共有する

チェックアウトリンクを作成した後、そのリンクを共有してお客様がそれを使用できるようにする必要があります。リンクテキストをコピーして、メールキャンペーン、ソーシャルメディア投稿、ダイレクトメッセージに貼り付けることができます。たとえば、リンクをTwitterの投稿に貼り付けて、フォロワーが販売中の商品を簡単に購入できるようにしたり、商品の購入方法について問い合わせるお客様にリンクを送ったりすることができます。

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

無料体験を試す