#63|ストアのデザイン

ウェブフローコレクションのデータを使用して、ウェブフローEコマースの商品ページをデザインします。

目次

商品リストを作成したら、コレクションリストを使って、ホームページや他の静的ページ、コレクションページで商品や商品カテゴリーを紹介することができます。コレクションリストでは、フィルタリング、ソート、ページ分割、アイテム数の制限を行うことができます。そして、完全にカスタム化された商品ギャラリーを手に入れることができます!

さらに、「カートに入れる」コンポーネント、カートコンポーネント、チェックアウトプロセスのルック&フィールをカスタマイズして、ショッピング体験がプロジェクトの残りの部分とシームレスに統合されるようにします。

このレッスンでは

  1. Eコマースページ
  2. Eコマースエレメント(要素)
  3. Eコマースコレクションリスト

について説明しています。

1. Eコマースページ

CMSのコレクションページと同じように、商品ページやカテゴリページを作成し、スタイルを設定することができます。ページパネルでは、チェックアウトエクスペリエンスをカスタマイズできる2つの新しいユーティリティページが追加されていることにお気づきでしょう。チェックアウトページは、買い物客が買い物を終えてチェックアウトに進むと最初に目にするページです。注文を送信すると、注文確認ページが表示されます。両方のページをカスタマイズして、ストアの他の部分とシームレスに統合できるようにスタイルを設定することができます。

2. Eコマースエレメント(要素)

Ecommerceでは、Ecommerceの機能をデザインに組み込むことができる新しい要素とコンポーネントのセットが提供され、カートに商品を追加するところから、カートの表示と更新、チェックアウト、注文確認まで、オンラインショッパーをショッピングの旅に案内することができます。


  • ショッピングカート

静的ページやコレクションページにショッピングカートを追加し、カートボタンやカート自体を完全にカスタマイズしてスタイルを設定します。ショッピングカートをカスタマイズするためのオプションがたくさんあります。


  • カートに入れる


商品ページや商品コレクションに接続されているコレクションリストにカートに入れる要素を追加することができます。これにより、買い物客は商品をショッピングカートに追加することができます。数量入力フィールドの有無、デフォルトの状態、在庫切れやエラーの状態など、ボタンのカスタマイズは自由自在です。


  • ウェブ決済


チェックアウトフォームやカートにウェブペイメントを追加することができます。


  • チェックアウトの要素


チェックアウトフォームには、いくつかのコンポーネントが含まれています。そのうちのいくつかは、その機能にとって絶対に必要なものであり、親コンポーネントから削除することができないものです。


  • 注文確認コンポーネント


注文確認コンポーネントには、多くの子コンポーネントが付属しています。このコンポーネントは完全にカスタマイズ可能で、子コンポーネントのどれでも追加パネルから追加することができます。


3. Eコマース用コレクションリスト

コレクションリストを使って、ホームページやその他の静的ページ、コレクションページに商品グリッドを作成したり、カテゴリーリストを表示することができます。また、例えばブログコレクションで商品を参照した場合、商品情報を引き出してブログ記事に表示することができます。

  • 商品検索
    サイト内検索を使用して、買い物客がサイト内の特定のコンテンツを検索できるカスタム検索エンジンを作成することができます。