Open navigation

Creating Search Results Page Based on Klevu Template

Update June 2021: The best way to integrate Klevu on your custom store is with Klevu JavaScript Library, please click here to find out more.
  1. Download the search results page integration package from the below attached file and copy 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="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 qand 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>
  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.

 

Did you find it helpful? Yes No

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