{"product_id":"2026-04-16","title":"【Horizon】検索ボックスに検索ワード候補を表示する","description":"\u003cp\u003eHorizonテーマの検索モーダルに「人気の検索ワード」チップボタンを表示する方法です。カスタムLiquidセクションにJavaScriptを貼り付けるだけで実装でき、テーマ本体のLiquidファイルは変更不要です。Dawn版の実装方法は\u003ca href=\"\/products\/2023-04-20\"\u003eこちら\u003c\/a\u003e。\u003c\/p\u003e\n\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\n\u003ch3\u003e完成イメージ\u003c\/h3\u003e\n\u003cp\u003e検索モーダルを開いた際、入力フィールドの直下にキーワードチップが表示されます。チップをクリックすると入力欄にキーワードがセットされ、予測検索が自動で動作します。文字を入力するとチップは自動で非表示になり、削除すると再び表示されます。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"検索モーダルに表示されたキーワードチップ（完成イメージ）\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-16_1_6715f362-40d3-47df-9f8e-6a8bff5da3ff.png?v=1776351593\" class=\"zoomable-image\" width=\"3000\" height=\"2400\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\n\u003ch3\u003e設定手順\u003c\/h3\u003e\n\u003cp\u003e◆カスタムLiquidセクションを追加する\u003cbr\u003eテーマエディタを開き、ヘッダーグループに「カスタムLiquid」セクションを追加します。サンプルコードをそのまま貼り付けるだけで動作します。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"テーマエディタでカスタムLiquidセクションを追加\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-16_2_1be5bc93-24d4-4799-a251-a38c02a3084f.png?v=1776351594\" class=\"zoomable-image\" width=\"3000\" height=\"2400\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e◆キーワードをカスタマイズする\u003cbr\u003eコード冒頭の \u003ccode\u003eSUGGESTIONS\u003c\/code\u003e オブジェクトを編集するだけでキーワードを変更できます。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"SUGGESTIONSオブジェクト — キーワードの設定\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-16_2.png?v=1776341100\" class=\"zoomable-image\" width=\"1400\" height=\"882\" style=\"aspect-ratio: 1.59;\"\u003e\u003c\/p\u003e\n\u003cp\u003eJavaScriptはMutationObserverで検索ダイアログの \u003ccode\u003eopen\u003c\/code\u003e 属性を監視し、モーダルが開いた瞬間にチップを挿入します。入力フィールドに文字が入力されるとチップは自動的に非表示になります。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"MutationObserverによるダイアログ監視とチップ注入\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-16_3.png?v=1776341100\" class=\"zoomable-image\" width=\"1410\" height=\"1992\" style=\"aspect-ratio: 0.71;\"\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48750228832507,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-16.png?v=1776354786","url":"https:\/\/store-dojo.com\/products\/2026-04-16","provider":"STORE DOJO","version":"1.0","type":"link"}