Customizing CSS

Klevu provides full control and flexibility on the look and feel of search results through CSS.

CSS for Search as You Type:
  1. Login into Klevu Merchant Centre (https://box.klevu.com) with the registered email id and password
  2. Choose the appropriate store from the drop down at the top
  3. Go to Customizations → Customize CSS
    Here, it shows the current CSS used on your site to render search results.

    • Save temporary for preview: Changes will be saved temporary. You can see the preview by clicking on Preview button
    • Save & publish: By clicking on the button, changes will be published to live site
    • Make this copy default: You can save the current copy of CSS as default.
    • Reset to default: If you are not happy with your changes then you can revert back to default copy
CSS for Search Results Page:

For Magento:

  1. Open klevu-landing-page-style.css under
    [magento-root-directory]/skin/frontend/base/default/css/klevu/ for Magento 1 and
    [magento-root-directory]/vendor/klevu/module-productsearch/view/frontend/web/css/ for Magento 2 folder
  2. Make changes in CSS as per your requirement
  3. Save the file

For Custom Stores:

At the time of integrating search results page, you should have downloaded the css files of Klevu search results page.

  1. Open klevu-landing-page-style.css under css folder
  2. Make changes in CSS as per your requirement
  3. Save the file