Search Field Integration

Search Field Integration

What it is 
The CSS selector configuration that binds the Autocomplete widget to the theme’s search input(s), enabling the widget to listen for keystrokes and display suggestions. 

Why it matters 
A correct selector is required for Autocomplete to initialize reliably across header, footer, mobile drawer, and other search input locations. Wrong selectors cause no-initialization or multiple bindings. 

How to configure 

  1. Inspect your theme to locate the search input element(s) (e.g., input[name="q"], form[action="/search"] input). 

  1. Paste a stable, specific selector into Search Field Integration (case-sensitive). 

  1. If multiple inputs exist, add selectors for each or use a common parent selector. 

  1. Save and test on pages where each input appears.

    • Related Articles

    • Auto Complete

      Learn how to configure autocomplete functionality to display predictive search results as users' type. Manage display settings, product visibility, and layout for faster product discovery. Autocomplete Configuration Set up how product names, ...

    • Instant Search

      Understand how to replace the default search page with ConversionBox’s Instant Search widget. Configure results display, sorting logic, and on-screen filtering for real-time product updates. Instant Search Setup Enable and customize Instant Search to ...

    • Category Search Activation

      What it is This setting activates ConversionBox’s Instant Search and faceted navigation on Shopify collection (category) pages. Why it matters By enabling Category Search, all your collection pages (e.g., Men’s Clothing, Electronics, Jewelry) gain ...

    • Instant Search Setup

      What it is The master toggle and initial configuration workflow that activates Instant Search and determines where ConversionBox will take over the store’s search results experience. Why it matters Turning Instant Search on redirects search queries ...

    • CSS Selector

      What it is The CSS selector field that tells ConversionBox where to render Instant Search results within the theme’s DOM (for example, replacing the default results container like #MainContent). Why it matters Correct selector mapping is the single ...