商品一覧ページのデザイン

顧客がカテゴリをクリックすると、その商品の一覧ページに移動します。各カテゴリの商品の一覧ページは、ニーズに応じてカスタマイズできます。

商品一覧エディターへのアクセス

SHOPLINE管理画面から、アプリ > Shopper App > アプリデザイン に進み、デザイン ボタンをクリックしてデザインエディターにアクセスします。画面上部のドロップダウンメニューから商品一覧を選択します。

プレビュー用の商品一覧の選択

左側のペインの最初のパーツはカテゴリのドロップダウンメニューです。下向き矢印をクリックして別のカテゴリに切り替えます。カテゴリに商品が作成されていないか、カテゴリがShopper Appの販売チャネルに追加されていない場合、ドロップダウンメニューには利用可能なカテゴリがありませんと表示されます。ドロップダウン内のカテゴリの順序は、顧客向けインターフェースの順序とは独立しています。

商品仕様をカラーチップとして表示したり、商品一覧ページにフィルターのサイドバーを有効にしたりしてショッピング体験を向上させるには、商品フィルタ＆カラーチップで商品表示を改善するを参照してください。

トップナビゲーションの設定

トップナビゲーションモジュールでは、商品一覧ページのヘッダーに表示されるパーツをカスタマイズできます。このモジュールには、左上アイコン、中央、右上アイコンの3つの設定可能なセクションが含まれています。各セクションはナビゲーションを強化し、ユーザーのエンゲージメントを向上させるよう設計されています。

各セクションで利用可能なパーツ

お知らせバナーの設定

お知らせバナーはページの上部に配置されており、削除や並べ替えはできません。お知らせバナーを設定するには、希望するコンテンツソースのオプションを選択してください：

• トップページのお知らせバナーから同期を選択すると、テキスト、色、その他の設定はトップページで設定されたものを継承し、編集できません。
• 独立して設定を選択すると、最大3つのお知らせを追加でき、テキスト、色、その他の設定をカスタマイズし、公開時間を設定し、個別のお知らせを非表示にすることができます。

並べ替え、フィルター、リスト表示の設定

並べ替え＆フィルター＆リスト表示セクションは、並べ替え、フィルター、リスト表示の3つのモジュールで構成されています。これらのモジュールにより、商品一覧ページの並べ替えオプション、フィルターオプション、商品表示の密度を設定できます。

これらのモジュールの順序は固定されており、変更や削除はできません。並べ替えとフィルターはデフォルトで有効であり、無効にすることはできません。リスト表示は独立して有効化または無効化でき、デフォルトでは無効になっています。

並べ替えの設定

並べ替えモジュールでは、以下の設定を行うことができます：

• プリセット並べ替え名：デフォルトの並べ替えオプションの名前を入力します（例：おすすめ）。この名前はアプリの並べ替えボタンに表示されます。この項目は必須で、多言語対応しています。

• セカンダリプリセット並べ替え：商品一覧ページに追加の並べ替えオプションを追加します。＋セカンダリ並べ替えを選択をクリックして並べ替えルールを選択します。おすすめ以外の任意の並べ替えルール（例：ベストセラーや新着）を選択できます。並べ替えルールを選択した後、セカンダリプリセット並べ替え名を入力してください。

  選択した並べ替えルールがスマート検索アプリで無効化されている場合、またはここで並べ替えルールを削除した場合、セカンダリ並べ替えオプションはストアフロントに表示されなくなります。ただし、入力したセカンダリプリセット並べ替え名は保持されます。

• 価格並べ替え：デフォルトでは無効です。有効にした後、デフォルトの順序（価格：安い順または価格：高い順。デフォルトは価格：安い順）を選択します。これにより、顧客はストアフロントで価格並べ替えオプションを使って商品を並べ替えられます。

フィルターの設定

フィルター モジュールでは、商品一覧ページに表示されるフィルターオプションを設定できます。

1. ＋ フィルターを追加 をクリックし、スマート検索 アプリが提供する サイズ、カラー、または 販売価格 などのフィルター属性を選択します。最大で 10 個のフィルターオプションを追加できます。

   

2. 保存済みフィルター リストで、各フィルターを個別に有効または無効にできます。

リスト表示の設定

リスト表示 モジュールでは、商品一覧ページの商品の表示密度を設定できます。表示オプション の下で、以下のレイアウトのいずれかまたは複数を有効にできます：

• 1行あたり1つ
• 1行あたり2つ（デフォルトで有効）
• 段差配置
• 1行あたり3つ

複数のレイアウトを有効にできますが、少なくとも1つは選択されたままでなければなりません。

レイアウトが1つだけ有効な場合、顧客はそのレイアウトのみを表示し、表示切替は表示されません。2つ以上のレイアウトが有効な場合、ストアフロントに表示切替が表示され、1つのレイアウトをデフォルト表示として指定する必要があります。

フローティングアイコンの設定

商品一覧ページにフローティングアイコンを追加できます。このアイコンはユーザーがスクロールしても表示され続けます。このアイコンはライブチャットサービスまたはイベントページにリンクさせることができ、顧客サポートの効率化やキャンペーンのエンゲージメント向上に役立ちます。

設定オプションは2つあります。トップページのフローティングアイコンと同期を選択すると、アイコンはトップページの設定を継承し、変更できません。独立して設定を選択すると、一覧ページ専用のフローティングアイコンを別途設定でき、以下の設定が可能です：

• 基本設定： アイコンに名前を付け、位置を選択し、アプリに表示するアイコン画像をアップロードします。
• 機能タイプ： アイコンがイベントページまたはライブチャット機能にリンクするかを選択します：
  • もしイベントページを選択した場合：リダイレクト先のページを設定します。
  • もしライブチャットを選択した場合：
    • 使用するチャットサービスを選択します。Shopper Appは現在、リアルタイムの顧客サポートのためのAI搭載ソリューションであるShulexとの統合をサポートしています。詳細はこちらのガイドをご参照ください。
    • 未読メッセージ通知を有効にするかどうかを決定します。有効にすると、未読メッセージがある場合に赤い点が表示されてユーザーに通知します。
• 有効化時間： 任意で、フローティングアイコンを公開するスケジュールを設定します。

デザインの公開

編集を完了し、プレビューで問題がないことを確認したら、右上の申請ボタンをクリックしてデザインをアプリに公開します。公開を保留したい場合は、保存をクリックして編集内容を保持できます。