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