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

### Dynamic Checkout Buttonについて

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

重要な注意：Dynamic Checkout Buttonは、ペイアズユーゴー価格モデル（[スロットプラン](https://help.pagefly.io/manual/pricing-plans/)）を使用しているストアでのみ利用可能な、PageFlyのGen 2エディターでのみ利用可能です。

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

* **Unbranded Button（ブランドなしボタン）**：このタイプは、「**今すぐ購入**」のようなシンプルなテキストを表示します。お客様がこのボタンをクリックすると、カートをスキップしてShopifyのチェックアウトに直接移動します。
* **Branded Button（ブランド付きボタン）**：このタイプは、PaypalやGoogle Payなどのサードパーティの高速チェックアウト方法のロゴを表示します。クリックすると、お客様はボタンに表示されたブランド付きチェックアウト方法を使用して購入を完了します。

![](/files/ozc7dVNUcmxU32BfDBYN)

{% hint style="info" %}
**注意**：Dynamic Checkout Buttonには、Shopifyの支払い設定で有効化している支払い方法のみが表示されます。サードパーティの高速チェックアウト方法を有効化していない場合、お客様にはブランドなしボタンのみが表示されます。
{% endhint %}

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

* 支払い設定（有効化している方法）
* [Shop Promise](https://help.shopify.com/en/manual/fulfillment/setup/shop-promise)が有効になっているかどうか（[Shop Pay](https://help.shopify.com/en/manual/payments/shop-pay)が優先されます）
* お客様のブラウザ
* お客様のデバイス
* お客様の個人の支払い履歴（Apple PayやGoogle Payでの過去の購入など）

ShopifyのDynamic Checkout Buttonの詳細については、[こちら](https://help.shopify.com/en/manual/online-store/dynamic-checkout)をご覧ください。

### Dynamic Checkout Buttonへのアクセス方法

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

{% embed url="<https://youtu.be/SX7LpMaa-d4>" %}

{% hint style="warning" %}
**重要な注意**：Dynamic Checkout Buttonは、正しく機能するためにProduct details要素の下に配置する必要があります。
{% endhint %}

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

* ステップ1：PageFlyエディターを開き、左側の**要素**パネルをクリックします。
* ステップ2：**Shopify要素**が含まれるShopifyタブに切り替えます。
* ステップ2：**Production**セクションで、**Dynamic checkout button**要素をクリックします。
* ステップ3：目的の要素をページエディターにドラッグアンドドロップして使用を開始します。

![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXXemvVZgCucNcRby1i57YQCTPFPIK-PfI4-uLY10oYRzJ4WWHY9adbplhDJ53LVYZW8H5Dcl84obSIAYDVO0WwADKhOSaZy9c9izwkEckvCt2nhX_Qb_e4ElZY56p7JbOc9LG0eZJuX8f664i1_XHAkeyjsPTXNJjHvavB-wEnshzcQ.gif)

### Dynamic Checkout Buttonの設定方法

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

#### General（一般）設定

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

![](/files/BatPjZJGKVrj8aS1WIm2)

GeneralタブのTracking、Attributes、Visibility、Animationなどのその他の設定の詳細については、[General settings guide](https://help.pagefly.io/manual/elements-general-settings/)を参照してください。

#### 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のスタイルを完全に調整できます。

![](/files/Dm5sZDg4jugTkdUbQFmf)

スタイリング設定の詳細については、[このガイド](https://help.pagefly.io/manual/elements-style-settings/)で確認できます。

### よくあるケース

#### Dynamic Checkout Buttonを全幅にする

{% hint style="warning" %}
**重要な注意**：Gen 2 Editorベータ版は現在終了しています。Gen 2 Editorで作成されたページとセクションは引き続き完全に機能します。強化されたバージョンが近日公開されます。
{% endhint %}

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

1. ボタンを選択した後、**Styling**タブに移動し、**サイズ**に移動します。
2. **幅**オプションで、「**コンテナを埋める**」を選択します。これにより、ボタンがコンテナの全幅に引き伸ばされます。

![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdIEXwEbz_A1bl4BvGybdMC-ZV8wu_A8Qd-lcLTq3Ax6vCdBIb8ACOuz_GEZOvdzNx3WZBLw4vfgea5rY0st8Uc8oM33NbhkKE5tsfjcrEETf78EMkYeVXt5xESTn5CCJkF_FUueRWEUqTgBbLq5AkeyqRH2JgR9r2LnapzX4krYgA.gif)

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

ブランド付き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」（今すぐ購入）ボタンを作成する方法の詳細については、このビデオをご覧ください。

{% embed url="<https://youtu.be/3sC-MLvUSWU>" %}

{% hint style="warning" %}
これはProduct Details要素内でのみ機能することに注意してください（Combined VariantオプションをオンにしたProduct Details要素に追加する必要があります）
{% endhint %}

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

* ステップ1：左側のサイドバーで「**要素**」を選択します。
* ステップ2：「**HTML/Liquid**」要素を見つけて選択します。
* ステップ3：この要素をページエディターにドラッグアンドドロップします。
* ステップ4：GeneralタブのOpen Code Editorボタンをクリックして、HTML/Liquid Code Editorを開きます。
* ステップ5：以下のコードをここに貼り付けます：{{ form | payment\_button }}

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

![](/files/w6XLHaDcz1r0zzNs8TpC)

[Paypalボタン](https://help.shopify.com/en/manual/payments/paypal/set-up-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など、いくつかのサードパーティの高速支払い方法をサポートしています。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.pagefly.io/pagefly-help-center-japanese/pjito/shopify-elements/product/shopify-elements-dynamic-checkout-button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.