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

ダイナミックチェックアウトボタンについて

その ダイナミックチェックアウトボタン 「カートに追加」ボタンの代替として機能し、顧客がカートのステップを省略して直接購入できるようにします。

ダイナミックチェックアウトボタンを 製品モジュール、 それは使用しています そのモジュールで選択された製品とバリアントのみ チェックアウトを開始します。

実際には、これは意味します

• 顧客は、選択した製品のバリエーションを 1 つだけ購入できます。
• ボタンをクリックすると、システムはカートをまったく使用しません。
• 以前カートに追加された製品はすべて完全に無視され、チェックアウトフローから削除されます。
• 顧客は、現在の製品モジュールから選択された製品バリアントのみを含む Shopify Checkout に直接リダイレクトされます。

例えば、顧客が既に商品Aをカートに追加した後、別の商品にアクセスしてダイナミックチェックアウトボタンをクリックした場合、現在の商品モジュールに表示されている商品のみがチェックアウト画面に表示されます。商品Aは含まれません。

ダイナミックチェックアウトボタンの2つの主な種類

ブランドボタン

Shopifyがサポートするサードパーティの高速チェックアウト方法をスト​​アで有効にすると、ブランドボタンが表示されます。これらのボタンにはプロバイダーの公式ロゴが表示されるため、顧客は好みのサービスを認識し、チェックアウトを完了しやすくなります。

サポートされているプロバイダーは次のとおりです:

• Amazon Pay
• アップルを支払います
• Google Pay
• PayPal
• ショップペイ
• Venmo

あなたが ショップペイ, アップルを支払います、またはライブ ページに類似のブランド ボタンが表示されている場合、それが顧客が利用できる迅速なチェックアウト方法を自動的に表示するダイナミック チェックアウト ボタンです。

詳細については、こちらをご覧ください Shopifyの記事.

ブランドなしのボタン 

ブランド化されていないボタンにはテキストが表示されます "即購入" 決済ゲートウェイが有効になっていない場合。顧客がクリックすると、カートをスキップしてShopifyチェックアウトに直接移動します。

ブランド化されていないボタンの表示は、次のようないくつかの要因によって異なります。

• Shopify管理画面の支払い設定
• 顧客のデバイスとブラウザ
• 顧客の過去の支払い履歴

ページにダイナミックチェックアウトボタン要素を追加する

ページにダイナミック チェックアウト ボタンを追加するには、次の手順に従ってください。

ステップ 1： GemPagesダッシュボード > ページ 作業したいページを選択してエディターに入ります。

ステップ2： 左のサイドバーから ダイナミックチェックアウト 検索バーに要素をドラッグ＆ドロップして 製品モジュールお好みの場所に置きます。

ステップ3： 要素をクリックすると設定が開きます。ここから、 設定 の三脚と 高機能 タブをクリックします。

設定タブを構成する

その 設定 タブには、ダイナミック チェックアウト ボタンの動作と外観を構成およびカスタマイズするためのさまざまなオプションが用意されています。

製品ソース

この要素は製品モジュール内にネストされているため、製品ソースはモジュールと自動的に同期されます。

ただし、別の製品を希望する場合は、現在の製品をクリックして、製品要素で管理します。

サイズ

下 サイズ セクションで、ボタンの幅、高さ、パディングを調整します。

• 幅： ドロップダウンオプションから、「コンテンツに合わせる（自動）」、「フル（100%）」、「小（100px）」、「中（116px）」、「大（132px）」のいずれかを選択します。ボックスに希望するパーセンテージを正確に入力することもできます。
• 高さ： 高さをカスタマイズするか、使用可能なオプションから選択します: コンテンツに合わせる (自動)、小 (28 ピクセル)、中 (36 ピクセル)、大 (44 ピクセル)。
• パディング： 「+ 追加…」ボックスをクリックして、パディングの設定パネルを開きます。 

経歴

GemPages では、色を選択したり画像を使用したりしてボタンの背景を設定できます。

• 色： 設定パネルを開いて、ボタンの色を選択します。単色の背景またはグラデーションの背景を選択できます。

• イメージ： 新しい画像をアップロードするか、メディアギャラリーから選択します。次に、設定パネルで画像をお好みに合わせて変更します。

形状

ボタンの見た目を改善するには、図形を追加したり、角の半径を調整したり、影の効果を追加したりすることができます。 形状 セクション：

• 境界： 境界線の色、太さ、境界線の線（実線、破線、点）を選択します

• コーナー： 境界線の角の半径を調整する
  • 値が高いほど角が丸くなります
  • 0 値 = 鋭く直角な角
  • コーナーをリンクまたはリンク解除して、すべての辺に同じ半径を適用したり、各コーナーを個別に設定したりできます。

例えば、角の半径を 100 に設定して、錠剤の形をしたボタンの外観を作成します。

• Shadow: ドロップ シャドウを適用してボタンに奥行きを加えます。これにより、ボタンが目立ち、よりダイナミックな外観になります。

テキスト

下 テキスト セクションでは、ボタンのテキストを自由にカスタマイズできます。 Show more すべてのテキスト設定を表示します。

効果

ここから、ボタンにホバー効果を追加できます。訪問者がボタンにマウスオーバーした際のボタンの外観をカスタマイズできます。

整列

ボタンの幅が 100% 未満の場合、ボタンの配置を左揃え、中央揃え、右揃えに変更できます。

詳細タブを設定する

より高度なカスタマイズについては、 高機能 タブをクリックし、 この記事.

さらに役立つヒントやビデオチュートリアルもご覧いただけます。 ジェムページアカデミー.

ダイナミックチェックアウトボタンに関するよくある質問

1. 「カートに追加 (チェックアウトにリダイレクト)」と「動的チェックアウト ボタン」の違いは何ですか?

2つのボタン さまざまな方法でカートをスキップする.

• カートに追加 → チェックアウトへリダイレクト カートは引き続き使用されます。カートページを視覚的にスキップするだけなので、カートにあるすべてのアイテムがチェックアウトに含まれます。
• ダイナミックチェックアウトボタン カートを完全にスキップします。現在の商品モジュールに表示されている商品のみを直接チェックアウトに送り、カート内の他の商品はすべて無視します。

例：

購入者がすでに追加しました 製品A カートに追加します。
その後、彼らは 製品B アクションを促すボタンをクリックしてチェックアウトに進みます。

• ページで カートに追加 → チェックアウト, 製品Aと製品Bの両方 チェックアウトページに表示されます。
• ページが ダイナミックチェックアウトボタン, 製品Bのみ チェックアウト時に表示されます。 製品 A はスキップされ、含まれません。

2. ブランド化されたダイナミック チェックアウト ボタンとブランド化されていないダイナミック チェックアウト ボタンの違いは何ですか?

• ブランドボタン Shopify ストアでこれらの支払いゲートウェイが有効になっている場合は、公式の支払いロゴ (Shop Pay、Apple Pay、PayPal など) を表示します。
• ブランドなしのボタン テキストを表示する "即購入" 加速支払方法が利用できない場合。

3. レイアウト内でダイナミックチェックアウトボタンをどこに配置すればよいですか?

その ダイナミックチェックアウトボタン 内にネストする必要があります 製品モジュール 正しく機能させるには、以下の手順に従ってください。ページに商品要素がまだない場合は、まず商品要素を追加し、その中にボタンをドラッグ＆ドロップしてください。

4. ダイナミックチェックアウトボタンのスタイルとサイズをカスタマイズできますか?

はい。調整できます 幅、高さ、パディング、背景色、角の半径、影 設定タブでホバーアニメーションや高度な効果を追加するには、 詳細設定タブ より詳細なカスタマイズ オプションについては、こちらをご覧ください。

5. 「カートに追加」ボタンの代わりに「Shop Pay」ボタンが表示されるのはなぜですか?

これは、 ダイナミックチェックアウトボタン が有効になっている場合、Shopifyは自動的にブランド化された高速チェックアウト（ ショップペイ or アップルを支払います) を標準の「カートに追加」ボタンの代わりに使用できます。

カートに追加のみ表示するには、無効にします ショップペイ 下 Shopify設定 › お支払い › 高速チェックアウト または、GemPages レイアウトから動的チェックアウト ボタン要素を削除します。