Webflow Ecommerceを使用すると、チェックアウト体験をシームレスにショッピング全体に統合できます。ショッピングカート、チェックアウト、注文確認などのEcommerceユーティリティページをカスタマイズしてスタイル設定する方法を見てみましょう。
このレッスンで学ぶこと
カートボタンを追加し、カスタマイズ、スタイル設定した後、カート自体をカスタマイズできます。カートのタイプ、オープンおよびクローズのアニメーションのイージングと期間、カートプレビューに表示するアイテム数を選択できます。また、製品が追加されたときにカートを開くかどうかも指定できます。
カートのタイプを指定する
Select the Cart element on the canvas and Open cart from the Element settings panel (D). Then, choose the Cart type.
キャンバス上でカート要素を選択し、 Element settings panel (D)からOpen cartを選択します。次に、Cart typeを選択します。
カートのアニメーションをカスタマイズする
アニメーションのトランジション「Easing」と「Duration」を設定することで、カートのオープンとクローズの方法を変更できます。プレビューモードで効果をテストできます。
異なるカートのスタイルを設定する
カートがオープンする方法を設定したら、そのカートの3つの異なる状態に対して異なる要素のスタイルを設定できます。
- Default（カートのプレビュー）
- Empty（カートにアイテムがない場合）
- Error（エラーが発生し、チェックアウトを続行できない場合）
これらの状態をCart wrapper settingsで切り替えることができます。
異なる状態のためにカートをカスタマイズする
デフォルトの状態では、カートプレビューに表示されるアイテムの数を指定できます。
errorの状態では、チェックアウトが失敗した場合に表示されるエラーメッセージをカスタマイズできます。 Error message settings にアクセスするには、Error message text blockを選択します。設定内の各メッセージをキャンバスで表示するには、それをクリックすると表示されます。メッセージを編集するには、設定内でホバーしたときに表示されるメッセージの隣にある鉛筆アイコンをクリックします。
Edit error message でデフォルトのエラーメッセージに戻すことができます。
カートのスタイリングとカスタマイズが終わったら、Element settings panel > Open cartを開くで開いたのと同じ方法でカートを閉じます。
カートラッパーをスタイル
カートを開くと、カートを囲むページ全体に半透明のオーバーレイが表示されます。これが「カートラッパー（Cart wrapper）」です。
ラッパーの背景色を変更する：
- Cart wrapperを選択します（精密な操作にはNavigatorを使用できます）。
- Style panelで背景色を変更します。
- 不透明な色を選択し、カートが同じページ内にあるポップアップモーダルであることがわかるように透明度を追加します。
いつでもカートラッパーの背景色プロパティから適用されたスタイルを削除して、デフォルトのスタイルに戻すことができます。
チェックアウトのフローを理解する
製品ページまたは製品リストから、ショッパーは「Add to cart」するか、「Buy now」オプションを選択して直接チェックアウトに移動できます。
注意: PayPalチェックアウトは異なるフローを使用するため、uy nowはStripe対応のストアでのみ機能します。
チェックアウト手順
顧客が製品をカートに追加したら、ストアの設定に応じて、3つの方法でチェックアウトを完了できます。
- クレジットカードを使用して支払いを完了するためにCheckoutページに移動します。チェックアウトページでは、割引コードを適用したり、注文に関する追加情報を提供したりすることもできます。注意: このオプションにはStripeが必要です。
- ウェブ決済（Apple PayやGoogle Payなど）を使用して、ネイティブのチェックアウトページをバイパスする迅速なチェックアウトを行います。注意: このオプションにはStripeとWeb支払いを有効にする設定が必要です。
- PayPalチェックアウトを使用して、ショッパーがPayPalを承認できる新しいモーダルが表示されます。その後、ショッパーは購入を完了し、割引を適用し、追加情報を提供するために**チェックアウト（PayPal）**ページに移動します。PayPalが有効になっている場合は、そのページを設計していることを確認してください。
注意: カートから移動した後、ネイティブのチェックアウトページの上部にWeb paymentsおよびPayPal buttonsを追加して、ショッパーにさらなるオプションを提供することもできます。
チェックアウトページをカスタマイズする
オンラインショッパーが製品をカートに追加し、注文を送信する準備ができた場合、カートを開き、チェックアウトを続行するオプションを選択し、チェックアウトページ（/checkout）に移動します。
チェックアウトページに移動するには、カートを開き、continue to checkoutをクリックします。
これはカスタマイズできる最初のEcommerceユーティリティページです。これはPages panel で見つけることができ、デフォルトのコンポーネントが付属しています。また、カスタマイズが必要なEcommerceページもすべて更新できます。これには以下が含まれます：
- チェックアウト
- チェックアウト（PayPal） - PayPalが有効になっている場合にのみカスタマイズが必要です
- 注文確認（Order Confirmation）
Eコマースのテンプレートページとユーティリティページ
チェックアウトページを自分の好みに合わせて、コンポーネントや要素を並べ替えたりスタイリングしたりすることができます。ただし、必須フィールドを持つコンポーネントを削除または非表示にすると、チェックアウトフォームが壊れる可能性があることに注意してください。Order items、Order summary、およびWeb paymentsを必要に応じて、Checkout pageのAdd panelからいつでも再追加できます。
チェックアウトフォーム（Checkout form）
チェックアウトページのフォームテンプレート要素全体を含んでいます。デフォルトのチェックアウトページテンプレートを復元したい場合に追加できます。
注文アイテム（Order items）
カート内のすべての製品とバリアントを表示します。ショッパーは、チェックアウトプロセスを完了する前に、これらが購入したい製品であることを確認できます。
注文の要約（Order summary）
カートの小計、税金、送料、注文の合計を表示します。これにより、カスタマーは支払う金額の詳細を確認できます。
ウェブ決済（Web Payments）
お客様にデジタルウォレット（Apple PayやGoogle Payなど）を使用して迅速にストアをチェックアウトする機能を提供します。
追加情報（Additional info）
チェックアウト時に収集された追加情報フィールドのいずれかに入力された情報を表示します。注意：OrderとCheckout Confirmationの両方を更新する必要があります。これらには自動的に同期されない独立したラベルとフィールドが含まれています。
デザインのヒント: このページには、ナビゲーションバーとフッターを追加することもでき、さらに「continue shopping」ボタンを追加して、ユーザーをメインストアページに戻すこともできます。
PayPalチェックアウトをカスタマイズ
PayPalを使用する場合、独自の「チェックアウト（PayPal）」テンプレートページをデザインする必要があります。
PayPalをサイトで使用しない予定の場合、このページを心配する必要はありません。PayPalは支払いプロバイダとして有効にならない限りアクセスできません。
公開されたサイトでPayPalを使用する場合、ショッピングの流れは次のようになります：
- ショッパーはカートまたは（通常の）チェックアウトページからPayPalチェックアウトをクリックします。
- PayPal支払いモーダルが開き、ショッパーにログインまたは支払い詳細および配送先を入力するよう促します。
- PayPalが認証された後、ショッパーはチェックアウト（PayPal）ページに戻ります。
- ショッパーはチェックアウト（PayPal）ページから配送方法を選択します（該当する場合）。
- ショッパーが購入を完了します。
- 購入が完了すると、ショッパーは**注文確認ページ（Order Confirmation page）**に移動します。
チェックアウト（PayPal）ページのデザイン
チェックアウト（PayPal）ページは、Ecommerceが有効になっていると自動的に作成されます。
注意: PayPalの機能が利用可能になる前にEcommerceが有効になっているプロジェクトの場合、ページはカートまたはチェックアウトページにPayPalボタンを追加した後に自動的に作成されます。このページがない場合は、カートにPayPalボタンを追加してみてください。
チェックアウトページと同様に、PayPalページにはデフォルトの要素が付属していますが、Add panelから追加や置換ができます。
PayPalチェックアウトフォームにはすべてのデフォルト要素が含まれています。ページをデフォルトの状態に戻すために追加してください。
チェックアウト（PayPal）ページの要素は、チェックアウトページと同じように機能しますが、これらの2つのページはリンクされていません。これらのページに似た構造と外観を手動で与える必要があります。
割引（Discounts）を使用したり、チェックアウト時に追加情報（Additional info）を収集したりする場合、これらの要素をチェックアウトページとチェックアウト（PayPal）ページの両方に追加することを確認してください。
PayPalチェックアウトページがチェックアウトから異なる点
- カスタマーがPayPalで支払うため、支払い情報の入力欄はありません。
- このページでショッパーに提供してもらう必要がある情報は、配送方法だけです。
- 注文に配送が必要な商品しか含まれていない場合、ショッパーは配送方法を選択する必要はありません。この場合、ページは購入が完了する前の最終確認のように機能します。
注意: PayPalは、ショッパーの全ての請求先住所をWebflowに送信しないため、公開されたサイトでは Payment info sectionに名前と請求先住所の国しか表示されません。
チェックアウトページのエラーメッセージをカスタマイズする
チェックアウト時に何か問題が発生した場合、ショッパーはさまざまなエラーメッセージを見ることになります。エラーメッセージをプレビューしてカスタマイズするには、チェックアウトフォーム要素を選択し、設定パネルでエラー状態に切り替えます。
次に、Error Message要素をクリックしてError Message Settingsにアクセスします。設定内の各メッセージを選択してキャンバス上で表示できます。メッセージを編集するには、そのメッセージにマウスオーバーしたときに表示される鉛筆アイコンをクリックします。
注意: あなたのストアがPayPalを使用している場合、チェックアウト（PayPal）ページでも同じエラーメッセージをカスタマイズする必要があります。
注文確認ページと関連する要素を理解する
注文が送信されると、オンラインショッパーは注文確認ページに移動します。これは、 Pages panel > Ecommerce pages sectionにある別のEcommerceユーティリティページです。
注文確認ページ（Order confirmation page）には、完全にカスタマイズおよびスタイルできるデフォルトのテンプレートが付属しています。チェックアウトページとは異なり、このページのすべてのコンポーネントは削除してAddパネルから再追加できます。注文確認コンポーネントをドラッグして、すべてのブロックを含むテンプレート全体を追加することもできます。
注文確認コンテナ内で以下のコンポーネントを個別に追加できます：
- 注文確認（Order confirmation)
- 注文アイテム（Order items）
- 顧客情報（Customer info）
- 配送方法（Shipping method）
- 支払い情報（Payment info）
- 注文サマリー（Order summary）
- 追加情報（Additional info）
- ダウンロード（Downloads (beta))
注文確認（Order confirmation）
注文確認ページのテンプレート要素全体を含んでいます。デフォルトのページテンプレートを復元したい場合に追加できます。
注文アイテム（Order items）
カート内のすべての製品とバリアントを表示します。ショッパーはこれらが彼らが購入したい製品であることを確認でき、チェックアウトプロセスを完了する前に確認できます。
顧客情報（Customer info）
チェックアウトフォームで顧客が提供した電子メールと配送先住所を表示します。
配送方法（Shipping method）
チェックアウト時に選択された**配送方法（shipping method）**を表示します。
支払い情報（Payment info）
チェックアウト時に顧客が提供した支払い情報と請求先住所を表示します。
注意: PayPalの注文の場合、PayPalは完全な請求先住所をWebflowに送信しないため、名前と請求先住所の国しか表示されません。
注文サマリー（Order summary）
カートの小計、税金、配送料、および注文の合計を表示します。これにより、ショッパーは支払う金額の内訳を確認できます。
追加情報（Additional info）
電話番号、ギフトメッセージ、および個別の指示など、顧客データを収集するために使用できます。
Downloads (beta)
注文内のすべてのダウンロード可能なファイルのリストです。
デザインのヒント: このページにナビゲーションバーとフッターを追加できます。また、ユーザーをメインのストアページまたはホームページに戻すボタンも追加できます。
最低取引額と最高取引額を理解する
ペイメントプロセッサーには取引限度額があります。もし買い物客の注文合計が下限を下回ったり上限を上回ったりすると、チェックアウト時にエラーメッセージが表示されます。
取引限度額は、ペイメントプロセッサーとストアの通貨によって異なります：
- PayPalの最小値は0.01ですが、PayPalを利用する買い物客には取引の最大値が設定されている場合があります。 詳細はPayPalのドキュメントをご覧ください。
- Stripeの限度額は、ストアの通貨によって異なります。例えば、USDの場合、最低0.50ドルです。 Stripeのドキュメントをご覧ください。
注文が最低金額を下回った場合、買い物客はチェックアウトの際に「注文の最低金額に達していません」というエラーを見ることになります。
無料の注文を理解する
時折、顧客は何かを提供しているか、100%の割引を適用しているため、合計金額がゼロの注文を持つことがあります。この場合、Webflowは注文を支払いプロセッサに送信せずにチェックアウトから処理します。
無料の注文に関する重要な注意事項:
無料の注文はWebflowの注文マネージャーに表示されますが、StripeまたはPayPalのダッシュボードには表示されません。これらの注文は支払いプロセッサに送信されないためです。
PayPalのチェックアウトは配送料が計算される前に開始されるため、配送料を含む前の小計が0の場合、PayPalのチェックアウトを開始できません。これは、PayPal専用のストアでは、注文の小計が0の場合、ショッパーがトランザクションを完了できなくなることを意味しますが、配送料を支払う必要があります。
PayPal専用のストアでは、無料の配送を提供するか、配送が不要な製品にのみ無料の注文を使用することをお勧めします。この場合、ショッパーはチェックアウト（PayPal）ページではなく、ネイティブのチェックアウトページを使用します。
