Instructions to install Klevu Shopify app on unpublished theme

1. Install the Klevu App on the Shopify store by following the steps given in the below guide:

https://support.klevu.com/knowledgebase/integration-steps-for-shopify/

2. Once Klevu App is integrated into the store, please immediately disable by following the steps below:

• Visit Shopify Admin > Apps > Klevu Search > Settings.
• On the settings page locate the option for Klevu Search on Frontend.
• Click Disable > Submit the changes.

unnamed (1)

3. Locate and save the JS API key.

• You will be able to find the JS API key by going to Admin > Apps > Klevu Search
• Once the Klevu Merchant Center Loads, click the Shop Info Icon (Looks like a Shopping Cart) and then scroll down to locate the JS API Key.
• It will look like the following:
Please save JS API Key for later use.

screenshot-lets-skinnydip.myshopify.com-2019.10.22-19_56_08

4. Once the app is disabled on the front end, we can manually integrate it into an unpublished theme for development.

• Visit Shopify Admin > Online Store -> Themes.
• If you do not have an unpublished theme, please duplicate the current theme and use it as the unpublished version.
• Please select “Edit HTML/CSS” -> Edit Layout
• Open the theme.liquid file

5. Paste the following code into the file directly below the closing tag. Please be sure to paste your JS API key into the script where noted. After completion, please save the theme.liquid file.

<script> //<![CDATA[
var klevu_key = "",
i = 0,
doc = document,
scripts = doc.getElementsByTagName('script'),
searchBoxId = doc.querySelector("input[name='q']") ?
(doc.querySelector("input[name='q']").id ?
doc.querySelector("input[name='q']").id : "searchq") : "searchq";

klevu_apiKey = "klevu-????????????";

searchTextBoxName = searchBoxId;
klevu_lang = "en";
klevu_result_top_margin = '';
klevu_result_left_margin = '';
klevu_process();
var allInputs = doc.getElementsByTagName('input'),
i = 0,
len = 0,
searchBoxes = new Array();
for (i = 0, len = allInputs.length; i < len; i++) {
if (allInputs[i].type === "text" || allInputs[i].type === "search") {
if (allInputs[i].name === "q" || allInputs[i].id === searchBoxId)
{ allInputs[i].form.action = "/pages/search-results"; }
}
}
function setKuViewGrid()
{ setKuView('grid'); }
function setKuViewList()
{ setKuView('list'); }
;
if (document.getElementById('searchedKeyword'))
{ document.getElementById('searchedKeyword').value = klevu_getParamValue('q'); }
var klevu_current_version = '1.2.1';
var klevu_shopifyStore = true;
var urlProtocol = ("https:" === document.location.protocol ? "https://" : "http://");
var klevu_storeLandingPageUrl = urlProtocol + window.location.hostname + "/pages/search-results";
if('undefined' === typeof klevu_pageCategory ){
if(document.getElementById('searchedKeyword') ){
document.getElementById('searchedKeyword').value = klevu_getParamValue( 'q' );
}
} else {
document.getElementById('searchedKeyword').value = '*';
}
function klevu_process() {
try
{ var ws = document.createElement('script'), kl_protocol = ("https:" === document.location.protocol ? "https://" : "http://"); ws.type = 'text/javascript'; ws.async = true; ws.src = kl_protocol + 'js.klevu.com/klevu-js-v1/js/klevu-webstore.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ws, s); }
catch (err) {}
}
function klevu_addtocart(id, url, qty) {
if ('undefined' !== typeof klevu_customAddToCart)
{ klevu_customAddToCart(id, url, 1); }
else
{ var urlProtocol = ("https:" === document.location.protocol ? "https://" : "http://"); var url = urlProtocol + window.location.hostname + '/cart/add?id=' + id + '&quantity=1'; window.location.assign(url); }
}
// ]]></script>

6. That's It! Klevu is now installed and integrated with the unpublished theme. Please be sure to share the preview link with our Support Staff and Sales team so we can assist you with any integration related issues.