Creating Search Results Page Based on Klevu Template

  1. Download the search results page integration package from here and copy the css and img
  2. Edit your search results page and paste all the following code before the closing head tag (i.e. </head>).
    <link href="css/klevu-landing-page-style.css" rel="stylesheet" type="text/css"/> 
    <link href="css/klevu-landing-responsive.css" rel="stylesheet" type="text/css"/>

    If you haven’t already added the following script on your landing page, please add it before the closing body tag (e.g. </body>).

    <script> var klevu_apiKey = '<klevuApiKey>', searchTextBoxName = 'q', klevu_lang = 'en', klevu_result_left_margin = ''; (function () {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); })(); </script>

    You need to replace the value of the <klevuApiKey> variable in the script. You can find the Klevu API key for your webstore in Klevu Merchant Center and go to Settings → Webstore Detail.

  3. We are assuming that the id and name of your search box is q. If it is different, please change value of the searchTextBoxName parameter. Also set the appropriate value for klevu_lang parameter (e.g. en for English, fi for Finnish).
  4. Edit your landing page and paste all the following code before the closing body tag (i.e. </body>).
    <script src="https://js.klevu.com/klevu-js-v1/js-1-1/klevu-landing.js" charset="UTF-8"></script>
    <script> document.getElementById('searchedKeyword').value= klevu_getParamValue("q"); </script>

    Here, it is assumed that name of your search box is q and that the value of your search box would have come to your landing page as one of the GET request parameters. For example:

    http://<yourserver>/landing-page.html?q=<searchedKeyword>
  5. For your convenience, we have designed an HTML div with product listing and facets. Open the landing-html.txt in the package downloaded above. Copy all the text from this file and paste it into your landing page where you want to display the search results.
  6. To change look and feel, e.g.: fonts, colors, etc., modify the klevu-landing-page-style.css.
  7. You are Done!