Search Overlay

A full-screen search overlay with predictive search capabilities, recent searches, and a luxury aesthetic.

Features

Core Functionality

• Predictive Search — Real-time results using Shopify’s Predictive Search API
• Recent Searches — Automatically saves and displays recent searches
• Search Suggestions — Customizable popular search suggestions
• Product Preview Cards — Elegant cards with images, pricing, and vendor info
• Multi-Section Results — Products, collections, and pages in organized sections

User Experience

• Keyboard Navigation — Arrow keys, Enter, Escape, plus Cmd/Ctrl+K shortcut
• Focus Management — Proper focus trapping and restoration
• Debounced API Calls — 300ms debounce to reduce requests
• Loading & Empty States — Visual feedback during search
• Mobile Optimized — Fully responsive design

Design

• Luxury gold accent (#C9A961)
• Frosted glass effect with backdrop blur
• Dark mode support

Opening the Overlay

• Click search icon — Any element with data-search-toggle attribute
• Keyboard shortcut — Press Cmd/Ctrl + K

Closing the Overlay

• Click close button (X)
• Click backdrop (outside search content)
• Press Escape
• Submit search (redirects to results page)

Configuration

Theme Settings

Ensure search is enabled in Theme Settings > Search:

• Enable search — Master toggle
• Enable predictive search — Show suggestions as customers type

Customization

CSS Variables:

:root {
  --search-overlay-gold: #C9A961;
  --search-overlay-navy: #1A2332;
  --search-overlay-white: #FFFFFF;
  --search-overlay-cream: #F5F2ED;
}

Translation Keys — All text is translatable via locale files under the search.overlay namespace.

Adding the Trigger Button

The search overlay opens when elements with data-search-toggle are clicked. Your header search icon should have this attribute:

<button
  type="button"
  class="header__icon header__icon--search"
  aria-label="{{ 'header.search.open' | t }}"
  data-search-toggle
>
  <!-- Search icon SVG -->
</button>

Accessibility

• role="dialog" and aria-modal="true" on overlay
• aria-live="polite" for screen reader result announcements
• Full keyboard navigation with focus trap
• Visible focus indicators
• Proper heading hierarchy

Analytics

The overlay automatically tracks events via window.dataLayer:

• search_overlay_opened
• search_performed (with query and results count)
• product_clicked (with product ID and query)
• search_submitted

Troubleshooting

Search not appearing: Check settings.search_enable is true, snippet is in layout, CSS/JS files are loaded.

No results: Verify products exist, check Shopify API accessibility, ensure minimum 2 characters typed.

Recent searches not saving: Check localStorage is enabled, no blocking browser extensions.