- Download the search results page integration package from here and copy the css and img
- 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 (shared by Klevu) on your landing page, please add it before the closing body tag (e.g. </body>).
- 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 in script. Also set the appropriate value for klevu_lang parameter (e.g. en for English, fi for Finnish).
- 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:
- 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.
- To change look and feel, e.g.: fonts, colors, etc., modify the klevu-landing-page-style.css.
- You are Done!