Search Bar Integration

Overview

The Search Bar Integration page controls how the ExpertRec search widget connects to the search input on your store. You can configure ExpertRec to attach to your existing search box, inject a new search box, or target a specific element using a CSS selector.

Navigate to: UI Customization > Advanced > Search Bar Integration

Integration Modes

Use Existing Search Box

ExpertRec takes over your theme’s existing search input field. Type-ahead and results appear as the customer types, but the visual appearance of the input itself comes from your theme. This is the recommended mode for most stores because it requires no layout changes.

To use this mode, provide the CSS selector for your existing search input. For example:

• input[type="search"]
• .search-form input
• #site-search

Add New Search Box

ExpertRec injects its own search box into a location you specify. Use this mode when your theme does not have a search input or when you want to add search to a specific page section.

Provide the CSS selector of the container element where the search box should be inserted. ExpertRec appends the search box inside that container.

CSS Selector Targeting

Both modes rely on CSS selectors to identify elements on your page. Tips for finding the right selector:

1. Right-click the search input in your browser and select Inspect.
2. Look at the id, class, or name attributes of the element.
3. Build a selector using the most specific unique attribute, such as #search-input or form.search-bar input.
4. Verify the selector returns exactly one element in the browser console using document.querySelector('your-selector').

Configuration Steps

1. Navigate to UI Customization > Advanced > Search Bar Integration.
2. Select the integration mode: Use existing search box or Add new search box.
3. Enter the CSS selector for your search input or container element.
4. Click Save.
5. Visit your storefront and confirm the autocomplete dropdown appears when you type in the search box.

Troubleshooting

• Dropdown not appearing: Verify the CSS selector matches exactly one element. Check the browser console for JavaScript errors.
• Multiple search boxes targeted: Use a more specific selector to target only the desired input.
• Theme updates breaking integration: Re-inspect your theme’s HTML after updates to confirm the selector is still valid.