Open navigation

How do I Integrate Search on Unpublished Theme?

Prerequisites

These instructions cover how to manually install Klevu on any theme. Once you are happy and want to go live, you have two options to make sure the Klevu integration isn't duplicated on your store:

  1. If you wish to use the Klevu App setting: “Klevu Search on Frontend” to enable Klevu, you must repeat these instructions in reverse to remove the manual theme changes, before using that setting.
  2. Alternatively, avoid using the Klevu App setting: “Klevu Search on Frontend”, and keep the changes you have made in your theme. Beware that after this point, if you Enable Klevu Search via the App Setting, you may end up with duplicated JavaScript code.

Installing on an Unpublished Theme

1. First you must install, or have already installed, the Klevu App from the Shopify store.

New installation

 Please follow the steps given in the below guide: Integration Steps for Klevu Search on Shopify, but when it comes to choosing whether to activate Klevu in your live theme, please choose not to do so.

Existing installation

If Klevu is already installed and you want to disable it while you try with another theme, please follow the below steps. If, however, you are happy for Klevu to remain enabled on your live theme for the time being, you can skip this step.

  • Visit Shopify Admin > Apps > Klevu Search > Settings.
  • Locate the option: Klevu Search on Frontend.
  • Select Disable, then scroll down and click the Submit button.
  • This will remove `klevuScript.js` from your store, and native Shopify search will resume.

2. Locate your Shopify store name and Klevu JS API key.

  • Your Shopify store name is the first portion of the URL you see in the Shopify admin panel, for example “my-store.myshopify.com”.
  • You can find the JS API key by first navigating to Shopify Admin > Apps > Klevu Search.
  • Once the Klevu Merchant Center Loads, click the “Shop Info” Icon and then scroll down to locate your JS API Key, which looks something like this: klevu-12345.
  • Please note down both your Shopify store name and JS API Key.

3. Next you can manually integrate Klevu into an unpublished theme. We recommend first taking a backup of any themes you wish to modify.

  • Visit Shopify Admin > Online Store -> Themes.
  • Find the theme you would like to try Klevu with and select Actions > Edit Code.
  • Open the Layout > theme.liquid file.

4. Scroll down to the very bottom and find the closing </body> tag.

5. Modify the following script to include your:

  • JS Api Key (eg. klevu-12345)
  • Shopify store name (eg. my-store.myshopify.com)
  • Language (eg. en)
<script src="https://js.klevu.com/klevu-js-v1/js/klevuScript.js?klevuapi=klevu-12345&lang=en&shop=my-store.myshopify.com"></script> 

Add this script before the closing </body> tag and save the modified theme.liquid layout.

6. Optional. If you also want to try out Klevu Smart Category Navigation on your unpublished theme, you can do so providing this feature has been enabled for your Klevu Plan. 

First, download the attached HTML file which will be needed to replace your collections template.

  • Open the Templates > collection.liquid file.
  • Replace the entire template with the contents of the downloaded HTML file.
  • Save the modified collection.liquid template.

7. Klevu is now integrated with your specified theme. You can use the Shopify “Preview” button near the top of the Theme Editor to see Klevu Search in action.

Did you find it helpful? Yes No

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