検索結果ページのデザイン方法

検索結果ページは、顧客の検索クエリに一致する商品を返します。ニーズに応じて検索結果ページをカスタマイズできます。

デザインの作成

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

検索結果のプレビュー

左側のペインの最初のパーツは検索結果の例で、ここで検索結果をテストおよびプレビューできます。検索語を入力すると、中央のペインに結果が表示されます。類義語やキーワードリダイレクトの設定、検索結果内の商品プロモーションなど、検索体験を向上させる方法については、スマート検索による検索体験の向上を参照してください。

お知らせボードの設定

現在、検索結果ページにお知らせボードを追加できます。お知らせボードはページの上部に表示されます。トップページのお知らせボードと同期するか、別々に設定するかを選択できます。

• トップページのお知らせバーから同期：お知らせボードの変更はできません。
• 独立して設定：テキスト、色、表示スタイルを編集でき、必要に応じて公開時間をスケジュールできます。お知らせは最大3件まで設定可能です。お知らせは削除できませんが、必要に応じて非表示または編集が可能です。

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

並べ替え・フィルター・リスト表示 セクションは、並べ替え、フィルター、リスト表示の3つのモジュールで構成されています。これらのモジュールにより、検索結果ページの並べ替え方法、利用可能なフィルターオプション、およびリスト表示オプションを設定できます。

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

並べ替えの設定

並べ替えモジュールでは、以下の設定を構成できます：

• プリセット並べ替え名： デフォルトの並べ替え方法の名前を入力します（例：おすすめ）。この名前はアプリの並べ替えボタンに表示され、必須であり、多言語に対応しています。
• 販売価格並べ替え： デフォルトでは無効です。有効にすると、デフォルトの順序（販売価格：低い順または販売価格：高い順）を選択する必要があります。アプリは販売価格の並べ替えオプションを表示し、顧客は選択した順序で商品を販売価格で並べ替えることができます。

フィルターの構成

フィルターモジュールでは、アプリに表示されるフィルターオプションを構成できます。

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

   

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

リストビューの設定

リストビューモジュールでは、利用可能な商品リストのレイアウトを設定できます。以下の表示オプションのうち、1つ以上を有効にできます：

• 1行あたり1つ
• 1行あたり2つ（デフォルトで選択されています）
• 段差表示
• 1行あたり3つ

少なくとも1つの表示オプションは有効にしておく必要があります。

表示が1つだけ有効な場合、アプリはその表示のみを表示し、表示切替は非表示になります。2つ以上の表示が有効な場合、アプリは表示切替を表示し、有効な表示のうち1つをデフォルト表示として指定する必要があります。

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

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

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

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

デザインの公開

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