Install Settings [Shopify]

After installing the Expertrec Smart Search Bar, you can integrate the Search Engine into the store using three different methods.

1. HTML code
2. Use existing Search Box
3. CSS selector

HTML Code

To add a generic Search Box to your store, add <ci-search></ci-search> tag to the HTML section where you want the Search Box to be displayed.

Use Existing Search Box

Expertrec supports the integration of the Search Engine to an existing Search Box on your store. Enable/Disable the integration using the Use Existing Search Box switch. The Suggestion Widget can be made to align with the input field of the Search Box by checking the Align Suggestion Widget to <input> check box.

Expertrec looks for three types of CSS Selectors to integrate the Search with the existing Search Box, this is to integrate with the following Search elements.

1. Search form
2. Input field
3. Search button

The widely used CSS selectors for the three Search elements are pre-entered for easy integration. If the Search integration into the store is not proper, you can add the CSS selectors manually or edit existing CSS selectors that are displayed as chips.

The advanced option is required when the implementation fails to integrate the Search Engine into the existing Search Box. This is the case when there is no Search Box present in the store.
Enable the Add a Search box if hook fails Switch to render a Search Box at a specific CSS selector. The usual CSS selectors where the Search Box is placed are pre-entered for easy integration. If you want to render a Search Box at a CSS selector not on the list, edit the existing CSS selector or add it to the list.

The changes made will take action only when you confirm them by clicking on the Update button.

CSS Selector

To add a Search Box to a particular section of your store, enter the CSS selector of that section of the store. Confirm the CSS selectors by clicking on the Update button.

Test Search

Before integrating the Expertrec Search Engine into your store, you can check how the Suggestion Widget and the Search Results page will be rendered by attaching the demo locally on your browser. This will add a Search Bar to your store, visible only on your browser. You can check how the Search will be implemented without impacting your store.

Take me to the page