Why is Klevu Search not working on my BigCommerce site after the integration?

After the integration in BigCommerce, if Klevu Search is not working or doesn’t look right on site, please check the known issues and suggested fixes for 10 most popular themes. Every BigCommerce theme is slightly different, so rest assured our support team is on hand to help to make Klevu Search look perfect on your theme.

Search box form field name must be ‘search_query’

For Klevu to detect the search box on your website, the form element must have a name of search_query. Some custom themes use other values for the form name such as “q” or “search_query_adv”, in which case please modify the appropriate template in your theme to change the search form field name. See an example in the top 10 themes below for theme: Covent Garden.

bc-name-of-search-box

Known issues and suggested fixes for 10 most popular themes:


Known Issues Suggested Fixes
None None

Known Issues Suggested Fixes
None None

Known Issues Suggested Fixes
The automated integration will fail and throw Incompatible Webpack Version error. Follow Manual Template Integration method
After integration, it looks like quick search is not working. It happens because of the position of quick search UI. CSS code to be added in KMC → Customizations → CSS tab. Please add the following code at bottom of the CSS.

/*To solve the Quicksearch position */			
.klevu-fluid .klevu-searching-area-l2, .klevu-fluid .klevu-pt-rs-hover {
	width: 50%;
	left: 50% !important;
	right: auto !important;
	margin-left: -25% !important;
  }	

@media only screen and (max-width:850px) {
.klevu-fluid .klevu-searching-area-l2, .klevu-fluid .klevu-pt-rs-hover {
       width: 90% !important;  
       margin-left: -45% !important;
  }
}

Known Issues Suggested Fixes
It shows the default search overlay when someone is searching. CSS code to be added in KMC → Customizations → CSS tab. Please add the following code at bottom of the CSS.

/*To hide the default search Overlay */			
div#quickSearch, .dropdown.is-open {
    display: none !important;
}  
.dropdown--quickSearch.is-open+.emthemesModez-overlay {
    display: none !important;
}

Known Issues Suggested Fixes
None None

Known Issues Suggested Fixes
The automated integration will fail and throw Incompatible Webpack Version error. Follow Manual Template Integration method
Quick Search is misaligned with the search box position. CSS code to be added in KMC → Customizations → CSS tab. Please add the following code at bottom of the CSS.

/*To solve the Quicksearch position */			
.klevu-fluid .klevu-searching-area-l2, .klevu-fluid .klevu-pt-rs-hover {
    width: 50%;
    left: 50% !important;
    right: auto !important;
    margin-left: -25% !important;
}
@media only screen and (max-width:850px){
.klevu-fluid .klevu-searching-area-l2, .klevu-fluid .klevu-pt-rs-hover {
        width: 90% !important;        
        margin-left: -45% !important;
    }
  }

Known Issues Suggested Fixes
The automated integration will fail and throw an error. Follow Manual Template Integration method
Search does not work on Tablet/Mobile. Open templates/components/common/search-box.html file and change the name of the searchbox from “search_query_adv” to “search_query”.

Known Issues Suggested Fixes
It shows the default search overlay. Also, in mobile quick search box is displayed out of the screen. CSS code to be added in KMC → Customizations → CSS tab. Please add the following code at bottom of the CSS.

/*To Hide the default Search overlay */			
.dropdown-panel-tooltip, .quick-search {
    display:none !important;
}
/* To solve the search results going out of screen */
@media only screen and (max-width: 480px) {
.klevu-fluid .klevu-searching-area-l2, .klevu-fluid .klevu-searching-area {
    width: 90%;
    left: 5% !important; 
}
}

Known Issues Suggested Fixes
None None

Known Issues Suggested Fixes
The automated integration will fail and throw Incompatible Webpack Version error. Follow Manual Template Integration method

Known Issues Suggested Fixes
None None

Known Issues Suggested Fixes
Default search is displayed behind the Klevu Quick Search result. CSS code to be added in KMC → Customizations → CSS tab. Please add the following code at bottom of the CSS.

/*To Hide the default search */			
.quickSearchResults { 
	display: none !important;
}