Skip to main content

Common Issues with Theme Integration

Updated

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 Issues Suggested Fixes
None None
Theme: Parts Warehouse

Known Issues Suggested Fixes
None None
Theme: Fortune

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 → 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 Issues Suggested 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 Issues Suggested Fixes
None None
Theme: Peak

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

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 → 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 Issues Suggested Fixes
None None
Theme: Foundry

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

Known Issues Suggested Fixes
None None
Theme: Lifestyle

Known Issues Suggested 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;
}

 

Related articles

Powered by Zendesk