Creating Search Results Page Based on Klevu Template

June 2021: You can now build custom quick search, search results and category pages using our JavaScript Library powered theme. Click here to find out more: Klevu JSv2 Theme
  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"/>
  3. Edit your landing page and paste all the following code before the closing body tag (i.e. </body>).
    <script src="" 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:

  4. 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.
  5. You are done!
    Please note,if you want to change look and feel, e.g.: fonts, colors, etc., modify the klevu-landing-page-style.css.