動的チェックアウトボタン

Dynamic Checkout Buttonについて

概要：Dynamic Checkout Buttonを使用すると、お客様はカートを介さずに閲覧している商品をすばやく購入できます。このボタンをクリックすると、お客様はカートの手順をスキップし、ボタンに表示されている支払い方法を使用して直接チェックアウトに進みます。このボタンは、お客様の希望する高速チェックアウト方法に基づいて動的に変化します。

重要な注意：Dynamic Checkout Buttonは、ペイアズユーゴー価格モデル（スロットプラン）を使用しているストアでのみ利用可能な、PageFlyのGen 2エディターでのみ利用可能です。

Dynamic Checkout Buttonには、2つのタイプがあります。

• Unbranded Button（ブランドなしボタン）：このタイプは、「今すぐ購入」のようなシンプルなテキストを表示します。お客様がこのボタンをクリックすると、カートをスキップしてShopifyのチェックアウトに直接移動します。

• Branded Button（ブランド付きボタン）：このタイプは、PaypalやGoogle Payなどのサードパーティの高速チェックアウト方法のロゴを表示します。クリックすると、お客様はボタンに表示されたブランド付きチェックアウト方法を使用して購入を完了します。

お客様に表示されるDynamic Checkout Buttonのタイプは、いくつかの要因に依存します。

• 支払い設定（有効化している方法）

• Shop Promiseが有効になっているかどうか（Shop Payが優先されます）

• お客様のブラウザ

• お客様のデバイス

• お客様の個人の支払い履歴（Apple PayやGoogle Payでの過去の購入など）

ShopifyのDynamic Checkout Buttonの詳細については、こちらをご覧ください。

Dynamic Checkout Buttonへのアクセス方法

詳細に入る前に、以下のビデオチュートリアルをご覧ください。

PageFlyのページで、Dynamic Checkout Buttonにアクセスするには以下の手順に従います。

• ステップ1：PageFlyエディターを開き、左側の要素パネルをクリックします。

• ステップ2：Shopify要素が含まれるShopifyタブに切り替えます。

• ステップ2：Productionセクションで、Dynamic checkout button要素をクリックします。

• ステップ3：目的の要素をページエディターにドラッグアンドドロップして使用を開始します。

Dynamic Checkout Buttonの設定方法

Dynamic Checkout Buttonをクリックし、GeneralタブとStylingタブに移動して設定します。

General（一般）設定

Generalタブでは、「Button text」フィールドに希望のテキストを入力することで、Dynamic Checkout Buttonに表示されるテキストをカスタマイズできます。例えば、「今すぐ購入」を使用できます。

GeneralタブのTracking、Attributes、Visibility、Animationなどのその他の設定の詳細については、General settings guideを参照してください。

Styling（スタイル）設定

Dynamic Checkout Buttonの外観をカスタマイズするには、それを選択してStylingタブに切り替えます。利用可能なカスタマイズのレベルは、使用しているDynamic Checkout Buttonのタイプによって異なります。

Branded Dynamic Checkout Button（ブランド付きDynamic Checkout Button）

Dynamic Checkout Buttonがサードパーティのブランディング（Apple PayやGoogle Payなど）とともに表示される場合、ブランドのスタイルに自動的に一致します。マーチャントは、これらのブランド付きボタンのスタイルを調整することはできません。

Unbrand Dynamic Checkout Button（ブランドなしDynamic Checkout Button）

ボタンがブランドなしの場合（支払い設定、Shop Promise、お客様のブラウザ、デバイス、個人の支払い履歴などの条件が満たされない場合）、ストアのデザインに合わせてDynamic Checkout Buttonのスタイルを完全に調整できます。

スタイリング設定の詳細については、このガイドで確認できます。

よくあるケース

Dynamic Checkout Buttonを全幅にする

Dynamic Checkout Buttonを全幅にする方法は以下のとおりです。

1. ボタンを選択した後、Stylingタブに移動し、サイズに移動します。

2. 幅オプションで、「コンテナを埋める」を選択します。これにより、ボタンがコンテナの全幅に引き伸ばされます。

ブランド付きボタンのスタイルは調整できません

ブランド付きDynamic Checkout Buttonは、一貫性のためにブランドのスタイルを自動的に表示し、これらはカスタマイズできません。統一感のあるストアデザインを維持するには、商品画像や背景色など、ボタン周辺の他の要素のカスタマイズに焦点を当て、ページ全体の見た目を向上させます。

Dynamic Checkout Buttonが機能しない場合

商品に正しくリンクされている場合にのみ機能するため、PageFlyのProduct details要素の下にボタンが配置されていることを再確認してください。

複数商品バリエーションに関する制限

Dynamic Checkout Buttonは、単一バリエーションの購入専用に設計されています。例えば、お客様は赤いTシャツを2枚購入できますが、同じ取引で赤いTシャツ1枚と青いTシャツ1枚を購入することはできません。複数バリエーションの購入を許可するには、代わりに「Add to Cart」（カートに追加）ボタンを使用するように案内してください。これにより、お客様は複数バリエーションを選択して通常通りチェックアウトに進むことができます。

Legacy EditorでDynamic Checkout Buttonを作成する方法

または、以下のカスタムコードでDynamic Checkout Buttonを追加できます。この方法は、Legacy EditorとGen 2 Editorの両方で作成されたページで機能します。

PageFlyで「Buy It Now」（今すぐ購入）ボタンを作成する方法の詳細については、このビデオをご覧ください。

この場合、**HTML/Liquid**要素を使用してコードを追加する必要があります。以下の手順に従ってください。

• ステップ1：左側のサイドバーで「要素」を選択します。

• ステップ2：「HTML/Liquid」要素を見つけて選択します。

• ステップ3：この要素をページエディターにドラッグアンドドロップします。

• ステップ4：GeneralタブのOpen Code Editorボタンをクリックして、HTML/Liquid Code Editorを開きます。

• ステップ5：以下のコードをここに貼り付けます：{{ form | payment_button }}

以下のGIFを確認できます。結果を表示するには公開する必要があることに注意してください。

Paypalボタンを追加するには、ShopifyストアでPaypalを設定し、上記のコードを使用する必要があります。

よくある質問

1. Dynamic Checkout Buttonは割引コードに対応していますか？

はい、Dynamic Checkout Buttonを使用する場合でも、お客様はチェックアウトプロセス中に割引コードを適用できます。割引フィールドがチェックアウトページに表示され、お客様はコードを入力できます。

2. お客様の希望する支払い方法が利用できない場合どうなりますか？

お客様の希望する支払い方法がShopifyの支払い設定で有効になっていないか、お客様のデバイスでサポートされていない場合、ブランドなしボタンが表示され、お客様はShopifyの標準チェックアウトを通じて購入を完了できます。

3. ShopifyのDynamic Checkout Buttonはどのようなサードパーティ支払い方法をサポートしていますか？

Dynamic Checkout Buttonは、Amazon Pay、Apple Pay、Google Pay、PayPal、Shop Pay、Venmoなど、いくつかのサードパーティの高速支払い方法をサポートしています。