Skip to product information
1 of 1
Published:2026.04.16

[Horizon] Show search term suggestions in the search box

[Horizon] Show search term suggestions in the search box

Applications

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

This is a method to display "popular search word" chip buttons in the Horizon theme's search modal. Simply paste the JavaScript into a Custom Liquid section — no changes to the theme's Liquid files required. For the Dawn version, see here.

Preview

When the search modal opens, keyword chips appear directly below the input field. Clicking a chip sets the keyword in the input and automatically triggers predictive search. Chips automatically hide when you start typing and reappear when the input is cleared.

Keyword chips displayed in the search modal (preview)

Setup

◆ Add a Custom Liquid section
Open the theme editor and add a "Custom Liquid" section to the header group. Simply paste the sample code as-is and it will work.

Adding a Custom Liquid section in the theme editor

◆ Customize keywords
Edit the SUGGESTIONS object at the top of the code to change the keywords.

SUGGESTIONS object — keyword settings

The JavaScript uses a MutationObserver to watch the search dialog's open attribute and injects chips the moment the modal opens. Chips automatically hide when text is entered in the input field.

Dialog monitoring and chip injection via MutationObserver

After making a purchase (all items are ¥0), you will be able to view the sample code.

If you have already made a purchase, please login here.

Sample Codes

Test Theme :Horizon 3.4.0

カスタムLiquid コード