Klevu Theme

We are very excited to announce our simplest approach yet for getting up and running with Klevu JavaScript Library: Klevu Theme.

See Klevu Theme in action on our demo page, and even try with your own API Key.

The following JS files contain everything you need to get up and running with Klevu, then below we have included some code samples which you can copy+paste to get started.

You can include the above URLs directly in your store, as they are backed by CDN for fast distribution, and will automatically track bug fixes and new Klevu features. Find out more here: Versioning.

Tip! For the fastest loading times, please add any Klevu related scripts as high as possible in your document <head/>, so the required JavaScript begins loading and processing as early as possible.

Quick Search

The following code is the minimum required to get a quick search, or auto-suggestions overlay, to appear. Copy this to your website and as soon as you click on the search box you should see some results appearing.

<!DOCTYPE html>
<html>
<head>
    <!-- Include JS Library -->
    <script src="https://js.klevu.com/core/v2/klevu.js"></script>

    <!-- Include Quick Search Theme -->
    <script src="https://js.klevu.com/theme/default/v2/quick-search.js"></script>

    <!-- Configure Klevu for your store -->
    <script type="text/javascript">
        klevu.interactive(function () {
            var options = {
                url : {
                    landing : '/search-results',
                    protocol: 'https:',
                    search: 'https://eucs3v2.ksearchnet.com/cs/v2/search' // your search URL
                },
                search: {
                    minChars: 0,
                    searchBoxSelector: "#my-search", // your search input selector
                    apiKey: "klevu-14728819608184175" // your Klevu JS API Key
                },
                analytics: {
                    apiKey: 'klevu-14728819608184175' // your Klevu JS API Key
                }
            };
            klevu(options);
        });
    </script>
</head>
<body>
<!-- The ID of the input matches 'searchBoxSelector' above -->
<form action="#">
    <input id="my-search" name="q" type="text">
</form>
</body>
</html>

Search Results Landing Page

The following code is the minimum required to get a SRLP up and running. Copy this to your website and use ?q=bag URL parameter to show some search results.

<!DOCTYPE html>
<html>
<head>
    <!-- Include JS Library -->
    <script src="https://js.klevu.com/core/v2/klevu.js"></script>

    <!-- Include Search Results Theme -->
    <script src="https://js.klevu.com/theme/default/v2/search-results-page.js"></script>

    <!-- Configure Klevu for your store -->
    <script type="text/javascript">
        klevu.interactive(function () {
            var options = {
                url : {
                    landing : '/search-results',
                    protocol: 'https:',
                    search: 'https://eucs3v2.ksearchnet.com/cs/v2/search' // your search URL
                },
                search: {
                    apiKey: "klevu-14728819608184175" // your Klevu JS API Key
                },
                analytics: {
                    apiKey: 'klevu-14728819608184175' // your Klevu JS API Key
                }
            };
            klevu(options);
        });
    </script>
</head>
<body>
    <!-- Add a placeholder where the search results will be injected -->
    <div class="klevuLanding"></div>
</body>
</html>

Category Pages

The following code is the minimum required to get a Category Page up and running. Copy this to your website and modify the klevu_pageCategory variable to show results for a particular category. This value must match the definition of categoryPath referenced in our API Documentation.

<!DOCTYPE html>
<html>
<head>
    <!-- Include JS Library -->
    <script src="https://js.klevu.com/core/v2/klevu.js"></script>

    <!-- Include Category Page Theme -->
    <script src="https://js.klevu.com/theme/default/v2/category-page.js"></script>

    <!-- Configure Klevu for your store -->
    <script type="text/javascript">
        klevu.interactive(function () {
            var options = {
                url : {
                    protocol: 'https:',
                    search: 'https://eucs3v2.ksearchnet.com/cs/v2/search' // your search URL
                },
                search: {
                    apiKey: "klevu-14728819608184175" // your Klevu JS API Key
                },
                analytics: {
                    apiKey: 'klevu-14728819608184175' // your Klevu JS API Key
                }
            };
            klevu(options);
        });
    </script>

    <!-- Provide current category context -->
    <script type="text/javascript">
        var klevu_pageCategory = "Clothing";
        sessionStorage.setItem("klevu_pageCategory", klevu_pageCategory);
    </script>
</head>
<body>
    <!-- Add a placeholder where the search results will be injected -->
    <div class="klevuLanding"></div>
</body>
</html>