Skip to main content

インスタント検索ウィジェット

インスタント検索ウィジェットの機能と、ドロップダウンのレイアウト・表示項目をカスタマイズする方法をご説明します。

Written by Thomas Ta

📖 Shopify標準の検索バーを、オートコンプリートとリアルタイムの検索結果表示にアップグレードできます。コーディングは不要です。このウィジェットは、商品・コレクション・ページ・検索候補を表示するカスタマイズ可能なドロップダウンを追加し、商品の見つけやすさとコンバージョンの向上を支援します。

インスタント検索ウィジェットとは

  • オートコンプリート: お客様の入力に合わせて検索キーワードを予測・補完します。

  • クリック時の検索候補: 検索ボックスを選択した際に、最近の検索、人気のキーワード、注目商品を表示します。

  • 検索結果0件への対応: 結果が0件の場合に、代わりの検索候補（キーワード、商品、コンテンツ）を表示します。

インスタント検索ウィジェットを有効にする（旧バージョンのみ）

Boost TURBO バージョンでは、インスタント検索ウィジェットは初期状態で有効になっています。旧バージョンをご利用の場合は、以下の手順に従ってください。

  1. アプリ管理画面で Search > Standard Search > Instant search widget に移動します。

  2. Enable Instant search widget (ISW) のボタンをオンにします。

  3. Save settings をクリックします。

検索ドロップダウンのレイアウトをカスタマイズする

インスタント検索ウィジェットは、最初の1文字が入力された時点から、検索ボックスに一致する候補をオートコンプリートのドロップダウンとして表示します。ドロップダウンには以下の要素が含まれます。

  • Popular suggestions（人気の検索候補）: 検索エンジンのアルゴリズムが、入力中の検索キーワードの続きを予測して生成する候補です。類義語ルール、サジェスト辞書、アナリティクスのデータなどをもとに表示されます。

    • Scoped suggestion（範囲を絞った検索候補）: Popular suggestions のサブ設定の1つです。特定のコレクションやベンダーなど、特定の範囲内での検索候補を提示することで、お客様が関心のあるトピックに絞り込みやすくなります。

  • Products（商品）: 商品タイトル、商品タイプ、ベンダー、タグ、商品オプション、SKU、バーコード、商品説明に検索キーワードが含まれる商品を表示できます。

  • Collections（コレクション）: タイトルに検索キーワードが含まれる関連コレクションが表示されます。

    • Exclude collection の項目にコレクション名を入力すると、特定のコレクションを結果から除外できます。

  • Blogs & Pages（ブログとページ）: タイトルに検索キーワードが含まれるブログ記事やページを表示できます。

ドロップダウンのレイアウトは、ご希望に合わせて自由にカスタマイズできます。レイアウトをカスタマイズするには:

  1. アプリ管理画面で Search > AI Search > Search layout settings > Instant search widget に移動します。

  2. Boost V2 バージョンをご利用の場合は、Enable Instant search widget のボタンがオンになっていることをご確認ください。

  3. Layout settings セクションで、Two Columns、Overlay Fullwidth、One Column の中からお好みのレイアウトを選択します。各レイアウトでは、以下を設定できます。

    • 関連商品をグリッド表示にするか、リスト表示にするか。

    • 関連商品を左右どちらの列に表示するか。

    • 1行あたりに表示する関連商品の数。

  4. Save settings をクリックします。

検索ドロップダウンの表示項目をカスタマイズする

  1. アプリ管理画面で Search > AI Search > Search layout settings > Instant search widget に移動します。

  2. Display settings セクションまでスクロールします。

  3. ドロップダウンに表示・非表示にしたい項目のボタンを切り替えます。

  4. ストアフロントのドロップダウンでの表示順に合わせて、項目をドラッグ＆ドロップで並び替えます。

  5. [任意] Label の項目で、ストアフロントでの各項目の表示名を変更できます。

  6. Highest number of displayed results の項目で、各項目に表示する結果の最大件数を1〜10の範囲で設定します。

  7. Product suggestion display セクションでは、検索結果に表示される関連商品の詳細情報の表示・非表示を切り替えられます。在庫切れ商品の表示や、関連商品のベンダー名、価格、SKU、セール価格、画像の表示を設定できます。

    注意: これらの設定は商品の表示情報のみを変更するものであり、検索アルゴリズムが参照するデータ項目には影響しません。

  8. Save Settings をクリックします。

ご不明な点やサポートが必要な場合は、チャットにて弊社サポートチームまでお気軽にお問い合わせください。

Did this answer your question?