商品情報にスキップ
1 1
公開日:2024.09.18

Shopifyの検索フォームに「部分一致」「完全一致」切り替えを実装する設定例

Shopifyの検索フォームに「部分一致」「完全一致」切り替えを実装する設定例

用途

  • ストア内検索管理・編集

実装方法

  • HTML/CSS
  • Javascript
詳細を表示する

Shopifyのサイト内検索もGoogleと同様に、検索ワードを「"(ダブルクォーテーション)」で囲むと完全一致で検索することができます。テーマ「Rise/Dawn」のヘッダー検索モーダルで部分一致・完全一致を指定して検索できるようにした設定例です(検索候補機能はOFF前提)


検索フォームに「部分一致」「完全一致」切り替えを実装する設定例


【(テーマRiae/Dawnの場合)設定方法】ヘッダーセクショングループにカスタマイズされたLiquidセクションを追加しコードを挿入


検索実行後の挙動パターン解説:検索結果画面に検索ワードが引き継がれているので、部分一致から完全一致にワンタップで切り替え可能「完全一致」指定時に、検索ワードを削除して別のワードで検索しても完全一致に自動で設定


ご購入(すべて¥0です)いただくと、サンプルコードをご覧いただけるようになります。

すでにご購入済みの方はこちらからログインしてください。

サンプルコード

動作検証済テーマ:Dawn/Rise 15.2.0

ヘッダーセクショングループにカスタマイズされたLiquidセクションを追加しコードを挿入

関連ポスト