この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。
引用元製品リストを構築したら、コレクションリストを使用してホームページやその他の静的またはコレクションページに製品と製品カテゴリを掲載できます。コレクションリストを使用して、アイテムの数をフィルタリング、ソート、ページネーション、制限できます。これにより、完全にカスタムの製品ギャラリーが作成できます！
その後、「add to cart」コンポーネント、カートコンポーネント、およびチェックアウトプロセスの見た目と感触をカスタマイズできます。これにより、ショッピングエクスペリエンスがプロジェクト全体にシームレスに統合されます。
このレッスンで学ぶこと
Ecommerceページ
productsページおよびcategoriesページを、CMSコレクションページと同じように構築およびスタイル設定できます。ページパネルで、チェックアウトエクスペリエンスをカスタマイズできる2つの新しいユーティリティページも確認できます。checkoutページは、ショッピングを終えてチェックアウトに進むとショッパーが最初に見るページです。注文を送信した後、Order confirmationページに移動します。これらのページの両方をカスタマイズし、スタイル設定して、ストアの残り部分とシームレスに統合できます。
もっと詳しく
Ecommerce要素
Ecommerceを使用すると、デザインにEcommerce機能を組み込み、オンラインショッパーを製品をカートに追加し、カートを表示および更新し、チェックアウトして注文確認まで案内できる新しい要素とコンポーネントのセットが提供されます。
カート
任意の静的またはコレクションページにショッピングカートを追加し、カートボタンとカート自体の完全なカスタマイズとスタイル設定が可能です。ショッピングカートをカスタマイズするための多くのオプションがあります。
カートに追加
製品ページまたは製品コレクションに接続されているコレクションリストに「add to cart」要素を追加できます。これにより、ショッパーは製品をショッピングカートに追加できます。ボタンをカスタマイズする方法
ウェブ決済（Web payments）
これにより、Web Payments をチェックアウトフォームまたはカートに追加できます。
チェックアウト要素（Checkout elements）
チェックアウトフォームには、その機能に絶対に必要なコンポーネントがいくつか含まれており、親コンポーネントから削除できない場合もあります。
注文確認要素（Order confirmation elements）
注文確認コンポーネントには、いくつかの子コンポーネントが含まれており、このコンポーネントは完全にカスタマイズでき、子コンポーネントのいずれかを追加できます。
Ecommerceコレクションリスト
コレクションリストを使用して、製品グリッドを作成し、ホームページやその他の静的またはコレクションページにカテゴリリストを表示できます。たとえば、ブログコレクションで製品を参照した場合、製品情報を引き出してブログ投稿に表示できます。
さらに詳しく；コレクションリストを使用してコレクションアイテムを表示する
製品検索
site searchを使用して、ショッパーがサイト上の特定のコンテンツを検索できるカスタム検索エンジンを作成できます。