Open navigation

Common Issues with Theme 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", "nav-quick-search" 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.

Known issues and suggested fixes for 10 most popular themes:

Theme: Cornerstone

Known IssuesSuggested Fixes
NoneNone
Theme: Parts Warehouse

Known IssuesSuggested Fixes
NoneNone
Theme: Fortune

Known IssuesSuggested 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 → CSStab. 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;
  }
}
Theme: Supermarket

Known IssuesSuggested Fixes
It shows the default search overlay when someone is searching.CSS code to be added in KMC → Customizations → CSStab. 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;
                      }
                      
Theme: Vault

Known IssuesSuggested Fixes
NoneNone
Theme: Peak

Known IssuesSuggested 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 → CSStab. 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;
    }
							
Theme: Covent Garden

Known IssuesSuggested 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".
Theme: Merchant

Known IssuesSuggested 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 → CSStab. 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; 
}
}
Theme: 22 Savile Row

Known IssuesSuggested Fixes
NoneNone
Theme: Foundry

Known IssuesSuggested Fixes
The automated integration will fail and throw Incompatible Webpack Version error.Follow Manual Template Integration method
Theme: Roots

Known IssuesSuggested Fixes
NoneNone
Theme: Lifestyle

Known IssuesSuggested Fixes
Default search is displayed behind the Klevu Quick Search result.CSS code to be added in KMC → Customizations → CSStab. Please add the following code at bottom of the CSS.
/*To Hide the default search */			
.quickSearchResults { 
	display: none !important;
}

 

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.