商品リストページのデザイン

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

商品リストエディタへのアクセス

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

プレビュー用の商品リストの選択

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

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

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

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

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

お知らせバナーの設定

お知らせバナーはページの上部に配置されており、削除や順序変更はできません。お知らせバナーを設定するには、好みのコンテンツソースオプションを選択します：

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

浮遊アイコンの設定

商品リストページに、ユーザーがスクロールしても表示される浮遊アイコンを追加できます。このアイコンは、顧客サポートの効率を向上させるためにライブチャットサービスやイベントページにリンクできます。

2つの設定オプションがあります：トップページの浮遊アイコンから同期を選択すると、アイコンはトップページの設定を継承し、変更できません。独立して設定を選択すると、リストページ専用の別の浮遊アイコンを設定でき、以下の設定を含めることができます：

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

デザインの公開

編集が完了し、プレビューで全てが正しく表示されていることを確認したら、右上隅の適用ボタンをクリックしてデザインをアプリに公開します。公開を保留したい場合は、保存をクリックして編集内容を保持できます。