Open navigation

Templates

There is a section called "Templates" under the Recommendations tab where you can customize the look and feel of your recommendation banners.


Here you can create multiple templates so you can assign a different look & feel to each of your recommendation banners. Each template's HTML, JavaScript, and CSS is fully customizable.



Klevu Recommendations is powered by Klevu JavaScript Library, so chances are you are already familiar with how it works and how easy it is to customize, allowing you to showcase any custom attributes from your product data within your banner product cells.

Please note that when you update a template, all banners which are using that template will be automatically updated on your production website, so please do take care to use the preview functionality first.


How to make the Klevu Recommendations templates your own?

Here are some common customizations to give you a better idea of customizing the recommendation banner look & feel.

Klevu Recommendations GUI Editor

This fantastic new feature is ready for you to use on your Production stores, however we are currently in a BETA period, so do let us know if you notice anything unexpected.

The Klevu GUI editor for Smart Recommendations makes it even easier to customise the look & feel of the Recommendation banners your customers will see. You can add, remove and rearrange individual components and build up a complete design, all without writing a single line of code.

This brief guide introduces the core elements of the GUI editor for Klevu Smart Recommendations.

The best way to get started is to take a look at this brief video, which will guide you through the core components of the GUI Editor:

Areas

Each “area” defines a section of your recommendation banner which can have child elements added to it. The area of most interest is the product listing, as this is where each of your product cells will appear, and you can specify components like images, text, price to appear for each product.

The main areas of interest are as follows:

  • Banner Area:This is the top level of your recommendation banner which contains all other elements. Think of this as your wrapper, to which you may add a banner title, a product listing, etc.
  • Title Area: This is what will appear above (or below if you prefer) your product listing, for example “Other customers also bought” would appear here, to introduce the context of your banner.
  • Product List Area:This is the wrapper for where your product cells will appear. You can add things like carousel and navigation functionality, and you should add a product area to it.
  • Product Area: Here you will see your individual product cells, and is where you will likely spend most of your time customising. You can add product name, image, price, etc. in here.

Components

You can add various components to each area, and the individual component types you can add will vary from area to area. For example, you cannot add product-related components like 'name' or 'price' to the title area, since that area has no product context.

The components should be self-explanatory, so we will not explain them all, and rather share some information about one or two of them so you can get a good idea how things work.

For example, within Product Area you will find the following

  • Name: To display the name of each product in your banner.
  • Price:To show the was/now price. If you prefer to show a static price, ie. without was/now or 'starting at', you can enter salePrice as your List Price Attribute, and leave the other two fields blank.
  • Image: The image of your product, defaulting to your products' image attribute.
  • … and many more!

Styling Controls and Override CSS

Within each component you will also find various controls to tweak the look and feel, such as font family, margin, border and background colour, etc. All of these controls will power the CSS that is used for your recommendation banner.

If you wish to take even more control, click on the “Override CSS” link, where you can edit the CSS rules yourself. You can then manually type in CSS rules and click on ‘APPLY’ to see your changes.

Warning: When you check the Override CSS box, the UI for editing styling will become unavailable as you have taken manual control. If you uncheck the Override CSS box, the values within the UI will be applied and you will lose any customisations you have made.

Live Preview

Throughout this editing experience you will see a live preview on the right hand side, showing what your banner will look like. You can switch this view between:

  • Desktop View
  • Tablet View
  • Mobile View

This gives you the chance to see what your banner will look like on all of your customers' devices.

The appearance of your recommendation banner within the GUI editor can vary once applied to your website, due to the way in which CSS styles can be inherited, so please do test on your UAT environment first.

Save and Publish

Once you are finished with your changes, please click on save and publish. You will then be able to assign your new template to one or more of your recommendation banners, and more importantly share your creation with your customers!

Each time you create a new template, please click on save and publish at least once before using a template on your store. This is to ensure that the generated design in the GUI editor is saved for your store, otherwise you may get unexpected behaviour on the frontend.

Convert to Code Based Template

Once you are happy with your initial design, if you want to take even more control, you can convert your creation into a version where you can access the full HTML, CSS and JavaScript. This allows your development team to add any number of customisations, directly within the Klevu UI.

One caveat here, however, is once you convert to the code based template, you cannot convert back, so please ensure this approach matches your own use cases. For this reason, we first clone your template and then convert it, meaning you still have access to the original, just in case.

FAQ

The GUI editor doesn’t look quite right on my mobile?

For the best experience using the Klevu GUI editor, we recommend using Google Chrome browser on your desktop (ie. not on your mobile). This is due to the various elements that you need to see on screen to get the most out of this great feature.

Which currencies does the GUI editor support?
Currently we only support the base currency of your Klevu store. Should you wish to show more currencies, or change this, then this can be achieved with some customisation where you would add some small JavaScript development. You can ask about this on the community forum.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.