website logo
Product FeedCommunity Forum
API Docs
Template JS
Headless SDK
Navigate through spaces
API Docs
Template JS
Headless SDK
⌘K
Introduction
Getting Started
Quickstart : Smart Search
Quickstart : Smart Category Merchandising
Quickstart : Smart Recommendations
Apps/Plug-ins
Guide
Structure
Configuration
JS Library
Versioning
Template Reference
Build UI
Custom Overrides
Recommendations Webhooks
Styling CSS
Analytics/Tracking
How To
Add Filters To URL
Add Pagination To URL
Add-To-Cart Function
Customer Groups
Infinite Scroll Results
Magento B2B MSI
Ratings / Reviews
SortBy Options
Docs powered by archbee 
7min

Styling CSS



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.

Default CSS files

https://js.klevu.com/theme/default/v2/quick-styles.css
https://js.klevu.com/theme/default/v2/landing-styles.css
https://js.klevu.com/theme/default/v2/catnav-styles.css

Note: You can place an additional .debug within the filename to view the un-minified version. This is handy for reference purposes only. Remove the .debug for production use.

e.g.

https://js.klevu.com/theme/default/v2/quick-styles.debug.css



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:

klevu({ theme: { quickSearch: { loadDefaultStyles: false }, landing: { loadDefaultStyles: false }, catnav: { loadDefaultStyles: false } } });



Important note about Klevu Analytics classes

The Klevu Template JS includes the necessary analytics class selectors for reporting product click tracking.

Including these specific class selctors is a common oversight when using custom templates.

See Analytics/Tracking for further details

Updated 03 Mar 2023
Did this page help you?
Yes
No
UP NEXT
Analytics/Tracking
Docs powered by archbee 
TABLE OF CONTENTS
Option 1: Override Klevu Styles (recommended)
Option 2: Overwrite Klevu Styles
Important note about Klevu Analytics classes