購入ボタンの作成

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

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

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

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

購入ボタンのデザインと動作は、以下のようにカスタマイズできます。

• 色
• サイズ
• フォント
• ボタンをクリックしたときのアクション
• チェックアウトを新しいブラウザウィンドウで開くかどうか

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

レイアウトスタイル

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

購入ボタンのアクション

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

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

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

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

購入ボタンの外観

• ボタンスタイルには、購入ボタンのボタン部分の形、色、タイポグラフィが含まれています。
• レイアウト：選択したレイアウトスタイルに応じて、ボタンの配置、画像のサイズ、ボタンのテキスト、フォント、色、サイズなどの設定をカスタマイズできます。
• ショッピングカート には、埋め込み式のショッピングカートのテキストと色のオプションが含まれています。また、「 注文メモ 」フィールドのラベルを有効にしてカスタマイズすることもできます。注文メモを使用して、注文の準備や配送に関するお客様からの特別な指示を収集できます。「 追加情報 」フィールドでは、お客様にメッセージを伝えることができます。
  • ボタンの アクションとして「商品をカートに追加」または「商品詳細を開く」を選択した場合にのみ、ショッピングカートの設定を編集できます。
• 詳細ポップアップには、商品詳細のポップアップウィンドウの設定が含まれています。ボタンのテキスト、数量項目を含めるかどうか、背景とラベルに使用する色、ラベルのフォントとフォントサイズをカスタマイズできます。これらの設定は、ボタンの アクションとして「商品詳細を開く」を選択した場合にのみ編集できます。

単一商品の購入ボタンを作成する

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

商品の購入ボタンを作成する前に、Shopify の管理画面で商品を登録し、購入ボタンの販売チャネルでその商品を利用可能にしておく必要があります。

手順：

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

コレクションの購入ボタンを作成する場合、実際にはコレクション内の各商品のボタンを作成することになります。

購入ボタンを作成する際に、レイアウトスタイルを選択し、ボタンの色、テキスト、外観、そしてお客様がボタンをクリックしたときのアクションをカスタマイズします。購入ボタンのカスタマイズについての詳細をご覧ください。

コレクションの購入ボタンを作成する前に、以下を済ませておく必要があります。

• Shopify の管理画面で商品を登録済みであること、
• 購入ボタンの販売チャネルで商品を利用可能にしていること
• コレクションを作成している。

手順：