The Advanced Live Search Add-on enhances the store search experience by displaying fast, accurate, and smart results as soon as users start typing. It helps users quickly find products, pages, and categories, making the shopping process smoother and more convenient.

 This addon comes with a powerful search management panel where you can track user search history, filter search records, and understand what customers are looking for. It also includes a fully customizable theme appearance section that lets you style the search dropdown with your own colors, backgrounds, button styles, and layout settings to match your storefront design.

The addon gives you complete control over how search works in your store, such as setting minimum characters, choosing how many results to show, enabling product details (price, code, categories), and deciding where the search should look (product names, keywords, descriptions, sub-categories, and pages). You can also improve accuracy using Boost Search and ignore unwanted terms by adding stop words.

Features

• Instant Search Results The addon displays live search suggestions as soon as the user starts typing, showing matching categories, products, and pages instantly.
• Search History Management Admins can view all user search queries and filter the records by All, Products, Pages, Categories, and Queries to understand customer behavior.
• Full Theme Customization Customize colors, backgrounds, text styles, and layouts for categories, pages, and products. Edit the default theme or create a new one, adjusting border radius, padding, quick-access icons, and product card designs.
• General Search Settings Set the minimum number of characters for search to start, choose how many products, pages, and categories to show, enable keyboard navigation, and configure the Load More button style.
• Product Search Controls Display product code, price, and categories in search results. Quick-action buttons like Add to Cart, Quick View, Wishlist, Search, and Compare can be shown directly in the search dropdown.
• Advanced Search Filters Enable search in product names, keywords, short and full descriptions, and sub-categories. Pages can be searched by name, description, and sub-pages. Boost Search helps improve result accuracy.
• Category Search Options Show results from product categories and search inside categories for more accurate results. If disabled, matching categories will not appear in search results.
• Stop Words Management Add and manage stop words to ignore specific terms during search, improving accuracy and filtering unwanted words. Words can be edited or deleted anytime.
• Improved Storefront Experience Users see instant dropdown results with matching categories and products, along with quick action icons. A Load More button lets them view additional products without leaving the page.
• Mobile-Friendly and Fast The addon is fully responsive and optimized for speed, ensuring smooth performance on mobile and tablet devices.

Installation:-

How to install Addon

https://store.ecarter.co/blogs/how-to-install-addon/

Addon Workflow

Step 1:  Live Search Page access

• In the General Tab.
• Items for menu: The live search page is available under the website menu.

Step 2: How to see live search history

• Go to Website >> Live Search.
• The Manage History Page displays all the search queries by users on your store. It shows details such as search query, search time, and more. You can also filter the search records using tabs like All, Products, Pages, Categories, and Query.

Step 3: Theme Appearance Configuration

The Theme settings page lets you customize the appearance of your store, including colors, backgrounds, text styles, and layout elements for categories, pages, and products.

• Display the available theme. You can edit the theme by clicking the edit icon, and if you want to create a new theme. This section helps you manage and customize the overall appearance of your store.

• This is the appearance page for the default theme, where you can customize its layout, colors, backgrounds, and other visual settings.

• This page allows you to create a new theme by selecting “Create new theme,” naming your theme, and customizing its colors, background, and layout settings according to your design preferences.

•  Enable the theme status to show on the storefront.

 1. Base Settings:

• Select theme: This option allows you to choose which theme you want to use for your store. You can switch between different available themes.

• Theme status: This status enables or disables the selected theme. When it’s checked, then the theme is active

• Base background: Set the main background color of your website.

• Header color: This option allows you to set the text color used in the header area.

• Header background: This allows you to choose the background color of your header section.

• Border radius:  This slider controls how rounded the corners of boxes, buttons, and layout sections will look.

2. Categories settings:

• Categories background: This option allows you to choose the background color for all category buttons.

• Categories text: You can select the text color that appears inside each category button.

•  Border radius: The slider adjusts the level of rounding for the category button. A higher value means a more curved corner.

 3. Pages settings:

• Pages text:  This option allows you to choose the text color for all page titles shown under the Pages section.
• All pages link: Set the text color for the “See all links” button that appears below the pages and categories sections.

4. Product Settings:

•  Product text: This option allows you to choose the text color for product names, codes, and prices.
• Product Background: Here, you can set the background color for each product block to control the appearance of the product area.
• Categories background: This setting allows you to choose the background color for the category labels shown on each product.  
• Categories text: This option allows you to select the text color for the category labels displayed on product cards.
• Quick access: Set the color of quick action icons like Add to Cart, Wishlist, View, or                Compare buttons shown under each product.
• Categories border radius: This slider adjusts the roundness of the category labels shown on each product
• mage border radius: This slider controls how rounded the product images appear by changing their border corners. 

5. Other Settings:

• Load more text:  Choose the text color of the “Load more” button.

• Load more background:  Set the background color of the “Load more” button. 

• Load more border radius: This slider controls how rounded the “Load more” button should look. A higher value makes the button more curved.

• Keyboard highlight: Choose the highlight color that appears when a user navigates the interface using the keyboard.

• Load more padding (L.R): This option adjusts the left and right padding of the “Load more” button, making it wider or narrower.

• Load more padding (T, B): This option adjusts the top and bottom padding of the “Load more” button, making it taller.

Step 4: General Settings

The General Settings section lets you control how your store search works by setting the minimum characters for search, deciding how many products, pages, and categories to show, choosing what product details (like price, code, categories, quick access options) should appear in search results, and selecting what the search should check for-such as product names, keywords, descriptions, sub-categories, and pages-to give customers faster and more accurate search results.

• In the General tab
• Minimum character: This sets the minimum number of characters a user must type before the search starts showing results.
• Products per search:  This option controls how many product results will appear each time a user searches.
• Page result per search:  This setting decides how many page results should appear in the search results.
• No. of categories to show:  This setting allows you to decide how many categories will appear in the search dropdown.
• Keyboard navigation: When this is enabled, users can move through search results using their keyboard, making navigation easier.
• Load more:  This option allows you to choose the style of the “Load more” action.

• In the Product tab.
• Product code: This option shows the product code in the search results so customers can quickly identify the exact item.
• Product Price: Enabling this option to show the product price in the search results helps customers see the cost without opening the product page.
• Product Categories:  Enabling this option shows the category of the product in the search results.
• Quick access (Add to cart, Quick view, wishlist, search, compare): These options allow customers to take quick actions directly from the search results.

• In the Search Tab.
• Search categories: This option allows the search bar to show results from product categories. It helps users find categories related to their search words.
• Product categories in categories: When enabled, the search will also check inside product categories to give more accurate category-based results.
• Boost Search:  Enable this setting to improve search accuracy and help display more relevant products at the top.
• Search for(sub-categories, product keywords, product name, product full, product short): Enabling these options to decide where the system should look while searching for products.
• Pages search:  Enabled this option to search pages.
• Page Search includes(Page name, Page description, sub pages):  Enabling these options decides what page content should be searchable. 

Step 5: Stop Words

The Stop words page allows you to add and manage words that should be ignored during search. These are common or unwanted words that you don’t want the system to consider while showing search results.

• On the stop words page.
• Press the (+) button on the top right to add new stop words.

• Enter the Search query for which you want to set stop words.
• Type the Stop word you want to ignore from the search results.
• Click on (+) to add the stop words to the list.

• You see the list of added stop words; also, you can edit and delete words.

How to work on Storefront

• When the user types a search term, a dropdown preview of results appears instantly.
• The top section shows matching Categories, helping users quickly filter their search.
• Below the categories, the matching Products are displayed with details like name, code, and price.
• Each product also shows quick-action icons for adding to cart, wishlist, comparison, and viewing details.

• When the user types in the search bar, a list of matching products is displayed instantly.
• A Load more button appears at the bottom to see more matching products without leaving the page.
• When you disable the categories setting, the search will not show any matching categories in the result.

Mobile View

Addon-Version:

Version-1.0

Supported Versions:

CS-Cart, CS-Cart Multivendor 4.8.x, 4.9.x,4.10x,4.11x,4.12,4.13x, 4.14x, 4.15x, 4.16x, 4.17x, 4.18x

Support:

This app is developed and published by Ecarter Technologies Pvt. Ltd., a CS-Cart developer. You are guaranteed a quality add-ons.