ZaraHome-Style Shopify Search Bar

I need the search experience on my Shopify store to look and behave exactly like the one on zarahome.com. The moment a visitor clicks into the field, real-time suggestions must appear, and as they type, the drop-down should update instantly, always showing four product cards (image, title, price) that mirror Zara Home’s spacing, typography and hover effects.

The job is purely front-end on Shopify: deliver a Liquid/JavaScript snippet—or an app-level solution—that plugs into my current theme without breaking anything else, inherits my store’s fonts and colours, and remains fully responsive on mobile and desktop. No third-party branding, no style drift; the visuals, transitions and loading behavior have to feel indistinguishable from the reference site.

Acceptance criteria
• Clicking the input triggers search suggestions before the first keystroke.
• Typing refines results live, capped at four products.
• Layout, padding and animations match zarahome.com pixel-for-pixel on major browsers.
• Code is clean, documented, and easily re-enabled after theme updates.

Hand over the final, tested code plus brief install instructions, and I’ll handle the rest.