ショッピングカートと支払い体験をパーソナライズする

カートの遷移をカスタマイズする

シフトを設定することでカートの開始と終了の方法を調整します 滑らかさ そして 間隔 アニメーション用です。プレビュー モードで効果を試すことができます。

明確なカート状態を設計する

カートの表示方法が決まったので、3 つのモード内のさまざまな要素をスタイル設定できます。

1. デフォルト（カートの概要）
2. 空（カートに商品がない場合）
3. エラー（チェックアウトの妨害の場合）。

これらのモードは、 カートコンテナの設定.

さらに詳しく: カート係数

さまざまなステータスに合わせてカートをカスタマイズする

のために デフォルト ステータスでは、カートの概要に表示するアイテムの数量を指定できます。

のために エラー 状態に応じて、支払い失敗時に発生する可能性のあるエラー通知を調整します。 エラーメッセージ テキストブロックにアクセスして エラーメッセージの設定。 クリック 鉛筆アイコン 設定を変更するには、設定内のエラー メッセージの横にマウスを移動すると表示されます。

あなたはできる デフォルトを復元 エラーメッセージ エラーメッセージを編集.

カートのスタイリングとカスタマイズが完了したら、開いたときと同じように閉じます。 要素設定パネル > カートを開始.

カートコンテナを設計する

カートを開くと、ページ上のカートを半透明のオーバーレイが囲みます。これは「カート ラッパー」と呼ばれます。

ラッパーの背景色を変更するには:

1. を選択 カートラッパー （あなたは ナビゲーター 正確さのため
2. 背景の色合いを変更する スタイルパネル
3. 現在のページのポップアップモーダルであることを示すために、単色を選択し、透明度を導入します。

カート ラッパーの背景色特性から適用されたスタイルを削除することで、いつでもデフォルトのスタイルに戻すことができます。

支払いの流れを理解する

購入者は商品ページまたは商品リストから カートに追加 または直接チェックアウトに進みます 今すぐ購入 選択。

述べるPayPalのチェックアウトは独自のフローに従うため、 今すぐ購入 Stripe が有効になっているストアでのみ有効です。

さらに詳しく: カートに追加して今すぐ購入 

支払い手続き

顧客が商品をカートに追加すると、ストアの設定に基づいて 3 つの方法で支払いを完了できます。

1. 進む 支払い ページでクレジットカードを使用して支払いを完了します。支払いページでは、プロモーション コードを適用したり、購入に関する追加の詳細を提供したりすることもできます。 注意: この選択にはStripeが必要です.
2. 利用する オンライン決済 （Apple PayやGoogle Payなど）を使用すると、元の支払い手続きを省略して迅速にチェックアウトできます。 チェックアウトページ. 注意：この機能にはStripeと オンライン支払いオプションを有効にする.
3. 選ぶ PayPalチェックアウト購入者がPayPalを承認できる新しいポップアップが開きます。その後、購入者は チェックアウト（PayPal） 購入を完了し、バウチャーを利用し、詳細情報を提供するページが表示されます。PayPal を有効にしている場合は、そのページをカスタマイズしていることを確認してください。

リマインダー: 挿入することもできます オンライン決済 そして PayPalボタン デフォルトの一番上に チェックアウト カートから離れた顧客にさらに多くの選択肢を提供するページ。

チェックアウトページを変更する

オンライン顧客がカートに商品を追加し、注文する準備ができたら、カートを開き、チェックアウトに進むことを選択して、チェックアウト ページ (/checkout) に移動します。

‍

これは、調整できる最初のEコマースユーティリティページです。 ページパネル デフォルトの要素が付属しています。また、次の要素を含むすべての E コマース ページを変更することもできます。

• チェックアウト
• チェックアウト（PayPal） – PayPalが有効になっている場合にのみカスタマイズが必要です
• 注文の確認

チェックアウトページは、必要に応じてコンポーネントや要素を再配置したりデザインしたりしてカスタマイズできます。必須フィールドのあるコンポーネントを削除したり非表示にしたりすると、チェックアウトフォームが乱れる可能性があることに注意してください。いつでも追加し直すことができます。 注文商品, 注文の概要、 そして オンライン決済 から パネルを追加 に チェックアウトページ.

チェックアウトフォーム

チェックアウト ページ フォームのすべてのテンプレート要素が含まれます。デフォルトのチェックアウト ページ テンプレートに戻す場合は、これを含めることができます。

注文商品

カート内のすべての商品とバリエーションを表示します。購入者は、チェックアウト プロセスを完了する前に、これらが購入を希望する商品であることを確認できます。

注文の概要

カートの小計、税金、配送料、注文の合計金額が表示されます。これにより、購入者は支払う金額の内訳を理解しやすくなります。

オンライン決済

顧客が標準のチェックアウト プロセスをバイパスし、デジタル ウォレット (Apple Pay や Google Pay など) を使用してストアからの購入を迅速に完了できるようにします。

詳細はこちら オンライン決済の有効化.

追加情報

チェックアウト中に収集された追加情報フィールドに入力されたデータを表示します。注意: 注文フォームとチェックアウト確認には、自動的に同期されない個別のラベルとフィールドがあるため、両方を必ず更新してください。

デザイン提案: また、このページにナビゲーション バーとフッターを導入し、ユーザーをメインのストア ページに戻す「買い物を続ける」ボタンを追加することもできます。

PayPalチェックアウトをカスタマイズ

PayPal を利用する場合は、別のチェックアウト (PayPal) テンプレート ページを設計する必要があります。 

サイトに PayPal を組み込む予定がない場合は、このページを気にする必要はありません。PayPal を支払いプロバイダーとして有効にしないと、PayPal にアクセスすることはできません。

ライブサイトで PayPal を利用する場合、PayPal での購入手順は次のようになります。

1. 購入者が選択 PayPalチェックアウト から カート または（標準） チェックアウトページ
2. PayPalの支払いモーダルが表示され、購入者はログインするか、支払いの詳細と配送先住所を入力するよう案内されます。
3. 購入者は チェックアウト（PayPal）ページ PayPal認証後
4. 購入者は配送方法を選択します チェックアウト（PayPal）ページ （該当する場合）
5. 購入者が購入を確定する
6. 買い手は 注文確認ページ 購入が完了すると

チェックアウト（PayPal）ページのデザイン

の チェックアウト（PayPal）ページ Eコマースが有効化されると自動的に生成されます。

リマインダー: PayPalが組み込まれる前にeコマースが有効になっているプロジェクトの場合、PayPalボタンを追加すると自動的にページが生成されます。 カート または チェックアウトページこのページが見つからない場合は、カートに PayPal ボタンを追加してみてください。

同様に チェックアウトページPaypalページにはデフォルトの要素が含まれており、 パネルを追加. 

‍

モジュールは 決済ゲートウェイ（PayPal）ページ 上のものと同じ機能を持つ 支払いページただし、これら 2 つのセクションは相互接続されていません。 レイアウトと外観が同等であることを手動で確認する必要があります。

雇用を希望する場合 割引 または集まる 追加の詳細 チェックアウトの際には、これらのコンポーネントを両方に組み込むことを忘れないでください 支払い そして 支払いゲートウェイ（PayPal）ページ.

PayPalチェックアウトページとチェックアウトの特徴

• 買い物客は PayPal 経由で支払うため、支払いの詳細を入力するフィールドはありません。
• このページで買い物客に求められる唯一の情報は、希望する配送方法です。
• 注文が配送を必要としない商品のみで構成されている場合、配送方法を選択する必要はありません。このようなシナリオでは、このページは購入を完了する前の最終確認のように機能します。

注記: PayPalは購入者の請求先住所をWebflowに送信しません。公開されているウェブサイトでは、 支払い詳細セクション 請求先住所の名前と国のみが表示されます。

支払いページのエラー通知をカスタマイズする

チェックアウト中にエラーが発生した場合、買い物客はさまざまなエラーメッセージに遭遇します。これらのメッセージをプレビューしてカスタマイズするには、 支払いフォーム コンポーネントと切り替え エラー 構成パネル内の状態。

次に、 エラーメッセージ コンポーネントにアクセスするための エラーメッセージの設定設定をナビゲートして、キャンバス上の各メッセージを表示します。メッセージを編集するには、設定でメッセージの上にマウスを置き、編集可能であることを示す鉛筆アイコンが表示されるまで待ちます。

注記: ストアがPayPalを利用している場合は、同じエラーメッセージをカスタマイズする必要があります。 決済ゲートウェイ（PayPal）ページ あまりにも。

注文確認ページと関連要素を理解する

注文を送信すると、オンライン購入者は注文確認ページに移動します。これは、 ページパネル > 電子商取引ページセグメント.

の 注文確認ページ デフォルトのレイアウトは完全に変更してデザインできます。 支払いページこのページのすべてのコンポーネントは、 パネルを追加注文確認要素をドラッグすることで、テンプレート全体をすべてのセクションに組み込むことができます。

注文確認コンテナ内に次の要素を個別に統合できます。 

• 注文の確認
• 注文商品
• クライアント情報
• 配送方法
• 支払詳細
• 注文の概要
• 追加情報
• ダウンロード（ベータ版）

注文の確認

注文確認ページ テンプレートのすべての要素が含まれます。デフォルトのページ テンプレートを復元する場合に追加します。

注文商品

カート内のすべての製品とバリエーションを表示します。購入者は、チェックアウト プロセスを完了する前に、これらが購入予定のアイテムであることを確認できます。

クライアント情報

明らかにする 電子メールアドレス そして 発送詳細 顧客がチェックアウトフォームに入力します。

配送方法

を示します 配送方法 チェックアウト時に選択されます。

支払詳細

を紹介します 支払いの詳細 そして 請求先住所 チェックアウト時に顧客から提供されます。

注記: PayPal 取引の場合、PayPal は Webflow に完全な請求先住所を提供しないため、名前と請求先住所の国のみが表示されます。

注文の概要

を表示します 小計 カートの、任意の 適用される税金 そして 送料、 そしてその 合計 注文金額。これにより、買い物客は支払いの内訳を把握できます。

追加情報

電話番号、ギフトメッセージ、カスタマイズされた指示などの顧客情報の収集に役立ちます。

ダウンロード（ベータ版）

ダウンロード可能なすべてのファイルを順番にリストします。デジタル ダウンロードの詳細をご覧ください。

デザインのヒント: このページにナビゲーション バーとフッターを追加するオプションがあります。さらに、ユーザーをメインのストア ページまたはホームページにリダイレクトするためのボタンを追加することを検討してください。

最小取引額と最大取引額の概念を理解する

支払い処理業者は取引制限を実施します。買い物客の注文金額が最小額を下回ったり、最大額を超えたりすると、チェックアウト時にエラー メッセージが表示されます。 

これらの取引しきい値は、支払い処理業者とストアの通貨によって異なります。

• PayPal では最低 0.01 が課せられますが、PayPal ユーザーには取引制限が課される場合があります。 詳しい情報については、PayPal の documentation をご覧ください。
• Stripe の制限はストアの通貨に基づきます。たとえば、USD の場合、最小は $0.50 です。 Stripeのdocumentationを参照.

注文が最低注文額を下回ると、買い物客はチェックアウト時に「注文の最低注文額に達していません」というエラーに遭遇しますが、これはカスタマイズできます。エラー メッセージのカスタマイズの詳細については、こちらをご覧ください。

無料注文について

場合によっては、景品や 100% 割引などの理由で、買い物客が合計金額がゼロの注文をすることがあります。このような場合、Webflow は注文を支払いプロセッサに送信せずにチェックアウト後に処理します。

無料注文に関する重要なポイント:

無料注文は Webflow 注文マネージャーに表示されますが、これらの注文は支払いプロセッサに中継されないため、Stripe または PayPal ダッシュボードには表示されません。

PayPal チェックアウトは送料を計算する前に開始されるため、送料前の小計が 0 の場合、PayPal チェックアウトを開始することはできません。その結果、PayPal のみを使用するストアでは、買い物客は送料を含む小計が 0 の取引を完了できません。 

PayPalのみを使用する店舗では、送料無料を提供するか、送料が不要な商品のみ無料注文を利用することをお勧めします。この場合、買い物客はネイティブの 支払いページ 代わりに 決済ゲートウェイ（PayPal）ページ.