Open navigation

Manual Integration with Stencil Theme

This content contains older information from our previous Javascript library. Please visit the link if you have implemented Klevu with the latest template JS.

Prerequisites:

We require any customers to install the Klevu integration on a test or staging environment first, in order to mitigate any issues in your live web store.

Installation steps:

If the Klevu Search app is not yet installed, please follow the installation steps given on this link.

Steps for manual template integration (with STENCIL theme):

These instructions cover the basic steps to access the code that makes up the theme, without having to install Stencil CLI (command-line interface). This is ideal for making minor adjustments to the theme that cannot be done directly within Store Design, or for adding scripts to integrate apps. This requires some basic knowledge of HTML for copy and pasting code which we will provide in the following steps. Before making large changes we suggest downloading your current theme.

  1. Go to the Klevu Search App → Integrate Klevu page.


  2. Scroll down to Manual Template Integration and click on the View Instructions button. 

  3. Copy the JavaScript and keep it somewhere for later use.

  4. Go to Storefront → My Theme → Current theme & Make a Copy of the current theme

  5. Click on the Copied theme and go to Theme Options → Edit Theme Files.

  6. Go to Templates → Layout & open base.html file.
  7. Insert the script (copied in Step 3) just before closing the body tag </body> and click on Save button.

  8. Go to Templates → Pages & open search.html file.

  9. Remove all the code from search.html file.
  10. Download the attached Zip file to integrate the Klevu search results page.
  11. Extract Bigcommerce-Search-Stencil.zip file and open Bigcommerce-Search.html file in your notepad.
  12. Copy all the code from Bigcommerce-Search.html and paste it to Templates → Pages search.html file.

  13. Click on Save File button.
  14. Go to Templates → Components → Search directory.
  15. Remove all of the code from every file under the Templates → Components → Search directory. Place the following code snippet into each file in replace of the removed content. (Why? Because BigCommerce editor does not allow you to save a completely empty file.)
    !-- removed for klevu --
        
    
  16. Click on Save & apply all files button.
  17. Go back to My Themes, and apply the copied theme by clicking on Apply button.

  18. You are done. Klevu search should be live on your store. It will take few minutes to sync all the products with Klevu. (If you have 1,000 SKUs the sync should take around 5 minutes. If you have 10,000 SKUs then it should take around 30-45 minutes.)

 

Multi-Currency / Customer Group / Price List Support

  • Follow this link to enable multi-currency / customer group/price list support in search results.

Troubleshooting FAQs

Did you find it helpful? Yes No

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