購入ボタンを作成する

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

購入ボタンの例

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

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

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

購入ボタンの色、サイズ、外観をカスタマイズし、ボタンをクリックしたときの動作を選択することもできます。

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

レイアウトスタイル

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

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

購入ボタンのアクション

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

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

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

    全表示レイアウトには、すでにすべての商品の詳細が表示されているため、全表示レイアウトを選択した場合、このオプションを利用できません。

購入ボタンの外観

  • ボタンスタイルには、購入ボタンのボタン部分の形状、色、文字体裁が含まれています。
  • レイアウトでは、選択したレイアウトスタイルに応じて、ボタンのアラインメント、画像サイズ、ボタンのテキスト、フォント、色、サイズなどの設定をカスタマイズできます。
  • ショッピングカートには、埋め込まれたショッピングカートのテキストと色のオプションが含まれています。また、注文メモフィールド用のラベルを有効にしてカスタマイズすることもできます。注文メモを使用して、注文の準備や配送方法に関する特別な指示をお客様に入力してもらうことができます。追加情報フィールドを使用すると、お客様にメッセージを伝えることができます。

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

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

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

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

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

手順:

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

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

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

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

手順:

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

無料体験を試す