Quick Start: Magento

December 2021 Update: Our official Magento extension now includes the Klevu JS Theme right out of the box! Simply upgrade to the latest version of our extension and select JSv2 Theme. Click here for more information.

This tutorial will guide you through adding Klevu Theme to your Magento store. We will be introducing a custom extension for adding some HTML and JavaScript code to your store, so it is assumed that you are already familiar with creating custom Magento extensions.


We recommend using our Magento extension instead of this guide, but if you prefer to integrate Klevu manually you can follow these steps below.

We have a sample module which you can reference for your own implementation. Please do not blindly copy this on to your production codebase and launch it, as it contains inline comments which must be read and understood so you can adapt the example to your own requirements.

The summary of the extension is as follows:

  • Included Klevu Features
    • Quick Search / Autocomplete popup.
    • Search Results Landing Page via a custom controller.
    • Category Page (optional paid subscription add-on required)
  • Layout XML
    • We introduce the Klevu JS Library and Quick Search code to every page of the store.
    • We also introduce some Search Results page code and Category code to the search and category pages, respectively.
  • Templates
    • The templates contain the HTML and JavaScript that you will find referenced within our generic instructions, but broken down into a Magento file structure.
    • klevu-init.phtml contains a dummy Klevu API key so you can see results immediately, even without a Klevu account.
  • Controller
    • We introduce one new route for handling the search results landing page.

There are many other ways to achieve the same result in Magento, and this is just one of them. For example you may prefer to re-use the catalogsearch/result/index route for search rather than a new controller, which can be achieved by adapting the layout aspects of this extension example.

If you have your own preferred approach then please do use this reference as a guide and apply the HTML and JS in your own manner.


There are a few scenarios to be aware of, depending on how you will be powering Klevu on your Magento instance, and whether you are already using the JS built into our Magento extension.

Klevu JS Theme for everything
This is the most straightforward, as you will be using the latest Klevu JS Theme for Quick Search, SRLP and (optionally) Category pages. If you are using our Klevu extension, you must ensure the frontend aspects are disabled to avoid any conflicts, via Stores > Configuration > Klevu > Enable on Frontend: No.

Klevu JS Quick Search with Preserve Layout
This one is a bit more complicated, since disabling Klevu on frontend as per the above steps would stop the preserve layout aspect from working on your SRLP and/or Category Pages. Please contact Klevu Support who will be able to guide you and help validate the process.


If you have any problems, please feel free to reach out to us at community.klevu.com, where you can get help from the Klevu JavaScript development team directly.