検索とプレディクティブサーチ
検索結果ページと/search/suggest.jsonによるサジェストUIを実装できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、検索結果ページと、入力に合わせて候補を出すサジェストUIを作れるようになります。
受託では、デバウンスとIMEの扱いを押さえておくと、日本語でも快適に動く検索になります。
検索結果ページはどう作るか
templates/search.jsonからmain-searchセクションを出します。search.performed / search.terms / search.results / search.results_countを使います。
結果には商品・記事・ページが混ざるので、object_typeで分岐します。paginateは必須です。?type=product,articleやoptions[prefix]=lastで、挙動を変えられます。
Predictive Search APIとは、入力中の候補を返すAPI
GET /search/suggest.json?q=シャツ&resources[type]=product,collection&resources[limit]=4&resources[options][unavailable_products]=hideのように呼びます。typeはproduct / page / article / collection / query、limitは1〜10です。limit_scopeで、全体で数えるか種類ごとに数えるかを選びます。
候補の描画はどこに任せるか
/search/suggest?q=...§ion_id=predictive-searchで、predictive_searchオブジェクトを使うセクションをサーバーに描画させます。
こうするとJSにテンプレートが要りません（Dawnの方式です）。
発展：日本語で快適に動かす要件
デバウンス（最後の入力から少し待って、1回だけ検索する仕組み）と、最小文字数を決めます。
矢印・Esc・Enterのキーボード操作とARIAも付けます。
日本語IMEでは`compositionend`のあとに検索します（変換中のinputでは検索しません）。
日本語の部分一致や表記ゆれは標準検索に限界があるので、要件が厳しければ検索アプリを検討します。
対応言語やレート制限（429）は、公式で確認します。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。