Manual template integration with STENCIL theme platform in BigCommerce

Important!
Klevu Search integration with BigCommerce is a stable product, however we are still in a beta period where we are carefully reviewing all installations to ensure the best possible outcome for our customers.

Get Early Access

 

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 to 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 Klevu Search App → Integrate Search page.  bc-settings-6-11
  2. Scroll down to Manual Template Integration and click on View Instructions button.  bc-manual-integration-show-script
  3. Copy the JavaScript and keep it somewhere for later use.     bc-manual-copy-script-1
  4. Go to Storefront → My Theme → Current theme & Make a Copy of the current theme bc-current-theme-copy
  5. Click on the Copied theme and go to Theme Options → Edit Theme Files.bc-copied-theme-edit
  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.bc-manual-paste-script
  8. Go to Templates → Pages & open search.html file.bc-open-search-file
  9. Remove all the code from search.html file.
  10. Download 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.bc-copy-script
  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 -->

    bc-manual-remove-search-code

  16. Click on Save & apply all files button.
  17. Go back to My Themes, and apply the copied theme by clicking on Apply button.bc-apply-theme
  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 muli-currency / customer group / price list support in search result.

Troubleshooting FAQs