Styling and CSS

With Klevu Theme we provide some base styles in CSS files to give the general structure of the search results. To see the styles we are including, open up the Klevu base JS file for the section you want to customise, for example quick search:

Within this file (or quick-search.debug.js or quick-styles.debug.css) for an easier to read version, you will see various CSS rules being referenced. This is where you will find the styles related to Klevu functionality for quick search.

There are several ways to override this base styling, detailed below.

For Magento 2 customers, we have also provided a skeleton module to get you started with CSS, HTML and JS overrides. After you have read this page, please also read the following guide.

Option 1: Override Klevu Styles (recommended)

The simplest, and our recommended approach to styling customisation, is to override the base CSS rules. Create your own stylesheet, include it in your website and override the styles you would like to change by cross-referencing our base stylesheets.

With this approach, as Klevu introduces new features or bug fixes, we may tweak the base CSS and you will directly benefit from these fixes. We take care not to introduce any breaking changes, but this approach does mean that if you have overridden something which we change in our base file, you may need to make minor changes to your own overrides from time to time.

Option 2: Overwrite Klevu Styles

If you prefer to modify the styles directly, rather than creating overrides, you may wish to take a copy of our CSS file and create your own version. You can then add this to your website and modify any of our CSS rules in place.

In order to stop Klevu styles from loading, you will need to add a setting to Klevu initialisation to prevent the loading of our default styles:

Important! The following code must be placed after the inclusion of klevu.js, but before the inclusion of your theme file, eg. quick-search.js.

klevu.interactive(function () {
    var options = {
        theme: {
            quickSearch: {
                loadDefaultStyles: false
            landing: {
                loadDefaultStyles: false
            catnav: {
                loadDefaultStyles: false

With this approach you will not benefit from any Klevu bug fixes relating to styling, as you have taken a snapshot of our theme and you are maintaining the stylesheet yourself.

Option 3: Start from Scratch

Finally you have the option of starting from scratch with no styles at all. This is essentially the same as the above section on “overwriting”, but you will start from an empty CSS file and not copy anything from the Klevu base stylesheet.

With this approach you will have to manually style every element of Klevu functionality that you intend to use on the website.