オンラインストアに動的チェックアウトボタンを表示する

動的チェックアウトボタンは、単一商品向けの [カートに追加する] ボタンの代わりとなるボタンです。動的チェックアウトボタンを使用すると、顧客はカートをスキップして直接チェックアウトに進むことができます。顧客は、Shopifyや他の馴染みがある簡単なチェックアウト方法でチェックアウトすることができます。これにより、決済処理がスピードアップし、顧客は馴染みがある方法でチェックアウトすることができます。

Apple Payロゴ付きのブランドの動的チェックアウトボタン

概要

動的チェックアウトボタンは、テーマと顧客のデバイスに応じて、[カートに追加する] ボタンの横または下に表示されます。動的チェックアウトボタンには2種類あります。

  • ブランドなしボタンには今すぐ購入テキストが表示されます。顧客がブランドなしの [今すぐ購入] ボタンをクリックすると、カートをスキップしてチェックアウトに移動します。

今すぐ購入テキストの付いた、ブランドなしの動的チェックアウトボタン

  • ブランドありのボタンには、外部サービスの簡単なチェックアウト方法のロゴが表示されます。顧客がApple Payなど外部サービスの簡単なチェックアウトのブランドありのボタンをクリックすると、情報が事前入力された状態でその方法のチェックアウトに移動します。詳細については、「簡単なチェックアウト」を参照してください。以下の外部サービスの簡単なチェックアウト方法を利用できます。

ブランドボタンとして表示される前に、各決済方法には特定の要件があります。

表示されるボタンの種類は、次の要素によって異なります。

  • 決済設定
  • 顧客のブラウザー
  • 顧客のデバイス

ストアでギフトカードまたはクーポンコードを使用している場合も、お客様はチェックアウト時にコードを入力できます。

互換性

動的チェックアウトボタンがオンラインストアに適さないケースがいくつかあります。オンラインストアに動的チェックアウトボタンを表示する前に、次の機能との互換性を考慮してください。

  • アプリ管理
  • カートの属性
  • 商品、決済設定、ボタンテキスト

アプリ管理

動的チェックアウトボタンが特定のアプリと競合する可能性があります。

次の種類のアプリを使用すると、動的チェックアウトボタンとオンラインストアとの互換性がなくなる場合があります。

  • 通貨コンバーター
  • カートと相互作用するアプリ
  • 顧客を外部のチェックアウトに導くアプリ

カートの属性

動的チェックアウトボタンはカート属性をサポートしていません。カート属性とは、カートページで顧客から追加情報を収集できるカスタムフォームフィールドです。

カート属性の例には、カートページへの次の追加が含まれます。

  • 利用規約のチェックボックス
  • ギフト包装オプション
  • 配達日選択ツール

カート属性に依存する場合、動的チェックアウトボタンはオンラインストアには適していません。

商品、決済設定、ボタンテキスト

オンラインストアに動的チェックアウトボタンを表示する前に、次の点を考慮してください。

  • 動的チェックアウトボタンは、商品の単一のバリエーションを購入する場合のみ使用できます。ただし、商品ページに数量セレクターを表示すると、顧客はその商品を複数購入することができます。たとえば、顧客は動的チェックアウトボタンを使用して水色のベーキングカップを3個購入することはできますが、水色で1個、紫色で1個購入することはできません。オンラインストアで1種類の商品を大量に受注しない限り、動的チェックアウトボタンは売上に貢献しない可能性があります。

  • 決済設定で外部サービスの簡単なチェックアウトを有効にしていない場合は、ブランドなしのバージョンの動的チェックアウトボタンのみが表示されます。

  • ブランドなしのバージョンの動的チェックアウトボタンには、今すぐ購入テキストが表示されます。カートに追加するボタンに今すぐ購入またはその他のカスタムテキストが表示されていると、顧客が混乱する可能性があります。

テーマをアップデートして動的チェックアウトボタンを使用する

動的チェックアウトボタンは、Shopify テーマストアのすべての最新バージョンのテーマで利用できます。旧バージョンのテーマを使用している場合は、動的チェックアウトボタンを使用できるようテーマを更新します。テーマを更新したくない場合は、テーマコードを編集します。

商品ページに動的チェックアウトボタンを表示する

手順:

  1. 編集するテーマを見つけて、[カスタマイズ] をクリックします。

  2. トップバーのドロップダウンメニューから [商品ページ] をクリックします。

  3. [セクション] をクリックします。

  4. [商品ページ] をクリックします。

  5. [動的チェックアウトボタンを表示する] をオンにします。

  6. 保存をクリック

おすすめ商品セクションに動的チェックアウトボタンを表示する

ほとんどのテーマには、おすすめ商品セクションに動的チェックアウトボタンを表示する設定が含まれています。

手順:

  1. 編集するテーマを見つけて、[カスタマイズ] をクリックします。

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

  3. 既存のおすすめ商品セクションをクリックするか、[セクションを追加] をクリックして、新しいおすすめ商品セクションを追加します。

  4. [おすすめ商品] > [追加] をクリックします。

  5. 商品の詳細を入力し、[動的チェックアウトボタンを表示する] をオンにします。

  6. 保存をクリック

商品ページで動的チェックアウトボタンを非表示にする

手順:

  1. 編集するテーマを見つけて、[カスタマイズ] をクリックします。

  2. トップバーのドロップダウンメニューから [商品ページ] をクリックします。

  3. [セクション] をクリックします。

  4. [商品ページ] をクリックします。

  5. [動的チェックアウトボタンを表示する] のチェックを外します。

  6. 保存をクリック

おすすめ商品セクションで動的チェックアウトボタンを非表示にする

手順:

  1. 編集するテーマを見つけて、[カスタマイズ] をクリックします。

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

  3. おすすめ商品セクションをクリックします。

  4. [動的チェックアウトボタンを表示する] のチェックを外します。

  5. 保存をクリック

テーマで動的チェックアウトボタンをテストする

テーマに表示される動的チェックアウトボタンの種類はさまざまな要素によって異なるため、テストを実行してすべての組み合わせを確認してください。テーマで動的チェックアウトボタンをテストする前に、ボタンが表示されていることを確認してください。

手順:

  1. [ストアを表示する] をクリックします。

  2. 商品ページでボタンをテストするには、商品ページに移動します。おすすめ商品セクションのボタンをテストするには、ホームページにとどまります。

  3. ブラウザーのアドレスバーで、次の文字列のいずれかを現在のURLの末尾に追加します。

- Amazonのブランドボタンを表示するには、?shopify-debug=true&show=Amazonを追加します。 - Apple Payのブランドボタンを表示するには、?shopify-debug=true&show=ApplePayを追加します (Apple PayはSafariでのみ動作します)。 - Google Payのブランドボタンを表示するには、add ?shopify-debug=true&show=Googleを追加します。 - PayPalのブランドボタンを表示するには、?shopify-debug=true&show=PayPalを追加します。 - Venmoのブランドボタンを表示するには、?shopify-debug=true&show=Venmoを追加します。 - ブランドなしのボタンを表示するには、?shopify-debug=true&show=checkoutを追加します。

  1. Enter を押してページを更新します。URLに追加した文字列に応じて、ブランドありの動的チェックアウトボタンまたはブランドなしの動的チェックアウトボタンが表示されます。

  2. 他の文字列でも同じ手順を繰り返して、さまざまな種類の動的チェックアウトボタンを表示します。

一部の商品だけに動的チェックアウトボタンを表示する

一部の商品だけに動的チェックアウトボタンを表示する場合は、代替テンプレートを作成します。代替テンプレートは、元のテンプレートに影響を与えずに編集できる複製したテーマコードテンプレートです。代替商品テンプレートを使用すると、あるテンプレートを使用する商品には動的チェックアウトボタンを表示し、別のテンプレートを使用する商品には動的チェックアウトボタンを非表示にすることができます。

代替商品テンプレートの作成については、「代替テンプレートの作成」を参照してください。

代替商品テンプレートを作成して商品に割り当てた後、商品の動的チェックアウトボタンの表示と非表示を選択できます。

手順:

  1. 代替テンプレートを作成したテーマを見つけて、[カスタマイズ] をクリックします。

  2. テーマエディタで、代替テンプレートを割り当てた商品の商品ページに移動します。

  3. [セクション] をクリックします。

  4. [商品ページ] をクリックします。

  5. 代替テンプレートを使用する商品の動的チェックアウトボタンを表示するには、[動的チェックアウトボタンを表示する] をオンにします。代替テンプレートを使用する商品の動的チェックアウトボタンを非表示にするには、[動的チェックアウトボタンを表示する] のチェックを外します。

  6. [保存] をクリックします。変更は、代替テンプレートを使用するあらゆる商品に適用されます。

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

無料体験を試す